Article 7: How to search list item base on ID

1.        Create New list with name is Customer or can download at here

a.       Change field Title to Customer ID

b.      Create new fields:

Name: Single line of text

Address: Single line of text

c.       Create new items as follows:

2.       Open Sharepoint Designer 2010

a.       In Site Pages, create new page ASPX

b.      Name is SearchCustomer.aspx

c.       Design UI as follows:

d.      Code here

<table style="width: 50%">

                <tr>

                                <td>Customer ID:</td>

                                <td>

                                                <input id="txtCustomerID" type="text" />

                                </td>

                </tr>

                <tr>

                                <td>Customer Name:</td>

                                <td>

                                                <input id="txtCustomerName" type="text" /></td>

                </tr>

                <tr>

                                <td>Address:</td>

                                <td>

                                                <input id="txtCustomerAddress" type="text" /></td>

                </tr>

                <tr>

                                <td>&nbsp;</td>

                                <td>

                                                <input id="btnSearch" type="button" value="Search" onclick="SearchCustomer();"/></td>

                </tr>

</table>

e.      Open Sharepoint site

3.       Start code

a.       Download 2 files jquery-1.4.2.js and jquery.SPServices-0.5.6 at here  and upload to Shared Documents on top level site.

b.      Attach 2 files .js to code html above close tag head

  

<script type="text/javascript" src="../Shared Documents/jquery-1.4.2.js"></script>

<script type="text/javascript" src="../Shared Documents/jquery.SPServices-0.5.6.js"></script>

c.       Code here

  

<script type="text/javascript">

var id="#txtCustomerID";

function SearchCustomer() {

            try {

                $().SPServices({

                    operation: "GetListItems",

                                            async: false,

                                            listName: "Customer",

                    CAMLQuery: '<Query><Where><Eq><FieldRef Name="Title" /><Value Type="Text">'+

                    $(id).val()+'</Value></Eq></Where></Query>',

                    completefunc: function(xData, Status) {

                        //alert(xData.responseXML.xml);

                        $(xData.responseXML).find("z\\:row").each(function() {

                                $("#txtCustomerName").val($(this).attr("ows_Name"));

                                $("#txtCustomerAddress").val($(this).attr("ows_Address"));

                        });

                    }

                });

            }

            catch (e) { alert(e); }

        }

</script>

4.       Save file and run on IE => OK

5.       Run on FireFox => OK

6.       Run on FireFox => not OK