create Autocomplete Text box of sharepoint list using jquery
01 | <link href="/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"> |
02 |
03 | <script src="/libs/jquery/1.4/jquery.min.js"></script> |
04 |
05 | <script src="/libs/jqueryui/1.8/jquery-ui.min.js"></script> |
06 |
07 | <script> |
08 |
09 | $(document).ready(function() |
10 |
11 | { var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body> <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'><listName>User
Information
List</listName><viewFields><ViewFields><FieldRef
Name='LastName0' /> </ViewFields></viewFields>
</GetListItems> </soapenv:Body> </soapenv:Envelope>";
//Make a call to the List WebService using the SOAP envelope described
above. //The URL is fixed to a Specific Site Root. Feel free to
change this //to your own fixed root or do some jscript voodoo to figure out where //Of course in 2010 you can do this with the Client Object Model, or hit //the list rest Service and return json, so enabling jsonp cross site calls. |
12 |
13 | $.ajax({ url: "/_vti_bin/lists.asmx", |
14 |
15 | type: "POST", |
16 |
17 | dataType: "xml", |
18 |
19 | data: soapEnv, |
20 |
21 | contentType: "text/xml; charset=\"utf-8\"", |
22 |
23 | success: function( xmlResponse ) { |
24 |
25 | var domElementArray=$( "z\\:row", xmlResponse ); |
26 |
27 | var dataMap = domElementArray.map(function() |
28 |
29 | { |
30 |
31 | return { |
32 |
33 | value: $(this).attr('ows_LastName0') , |
34 |
35 | id: $(this).attr('ows_LastName0') |
36 |
37 | }; |
38 |
39 | }); |
40 |
41 | var data = dataMap.get(); |
42 |
43 | //Find
the Sharepoint Portal Search Box (this is a poor selector, but it is
not properly named by sharepoint, well it is but INamingContainer getrs
in the way) |
44 |
45 | $("input. autogool ").autocomplete( |
46 |
47 | { source: data |
48 |
49 | }); |
50 |
51 | } |
52 |
53 | });//.ajax |
54 |
55 | });//docReady |
56 |
57 | </script> |
58 |
59 | |
60 |
61 | <input id="Name" class="autogool" style="width: 190px" type="text"> |
Comments