AUTO COMPLETE CONTROL USING SP SERVICES

Greetings !!!

I am going to explain how to read SharePoint list items using SP services.
Using SP Services we can make text box into auto complete control with the list item.
In first step add the below references:

http://../../../../_layouts/15/js/jqueryCustom-1.7.1.min.js
http://../../../../_layouts/15/js/jqueryCustom-ui-1.18.min.js
http://../../../../_layouts/15/js/jquery.SPServices-0.6.2.min.js
<SharePoint:CssRegistration ID=”cssReg” runat=”server” Name=” /_layouts/15/js/jquery-uiCustom.css “></SharePoint:CssRegistration>

Here is the script which pulls data from list and bind the values to your text box.

Sys.Application.add_load(wireEvents);
function wireEvents() {
$(function () {
var name = new Array();
var availableTags = GetListItems();
function GetListItems() {

var index = 0;
var ID, Title;
$().SPServices
({
operation: “GetListItems”,
async: false,
listName: “ListNameHere”,
CAMLQuery: “”,
CAMLViewFields: “”,
completefunc: function (xData, Status) {
$(xData.responseXML).find(“z\\:row,row”).each(function () {
name[index] = = $(this).attr(“ows_Title”);
index++;
}
});
}
});
return name;
}
function split(val) {
return val.split(/,/);
}
function extractLast(term) {
var nonSpaceTerm = split(term).pop().toString();
if (/^\s+\S*/.test(nonSpaceTerm)) {
nonSpaceTerm = nonSpaceTerm.replace(/\s+/, “”);
}
return split(nonSpaceTerm).pop();
}
$(“input[name*=’txtTitle’]”)
// don’t navigate away from the field on tab when selecting an item
.bind(“keydown”, function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data(“autocomplete”).menu.active) {
// on key down and selct of data this will trigger
event.preventDefault();
}
})
.autocomplete(
{
minLength: 1, // Suggestions will display on one character in text box, you can increase this to minimize the search results.

source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));

//response(results.slice(0, 10));
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
this.value = terms.join(“”);
this.value += ” “;
return false;
}
});
});
}

Here i am trying to pull the values from Title column, you can replace as for your requirement. Find the line listName: “ListNameHere” above and place your list name.
Here is the text box control
<asp:TextBox id=”txtTitle”  runat=”server”  placeholder=”Opponent Name”></asp:TextBox>

After all the above steps deploy the solution and your control will load with all suggestions available in your Title column as shown below.
In below i have entered “o” and it pulls all the records which has that characterSP Services.

Thank you, Happy Coding.

Advertisements