The way to achieve it via JQuery and SPServices is:
Let’s say you have created a Visual Web Part in SharePoint and you have a textbox in your web part which you want to make as an autocomplete textbox. Now, this textbox should show the suggestions coming from your custom list named as “Items” and the column which it should target in your custom list is “ItemNumber”.
Just put below lines of code in your Visual Web Part’s “ascx” file, change the list name and the column name as per your need and you will be good to go:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var itemSource = [];
var k = 0;
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Items",
CAMLViewFields: '',
CAMLQuery: '',
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function () {
itemSource[k] = $(this).attr('ows_ItemNumber');
k = k + 1;
});
$('#<%=txtAutoComplete.ClientID%>').autocomplete({
source: itemSource,
minLength: 0
});
}
});
});
</script>
<asp:TextBox ID="txtAutoComplete" runat="server"></asp:TextBox>
So what we have done here is:
Have given reference to the:
͐ JQuery UI js file
͐ JQuery js file
͐ Autocomplete js file
͐ SPServices js file
Have used JQuery variable as “itemSource” as an array to store the column values we will get from the custom list
Have used JQuery variable as “k” to keep the track of current item index
Under “SPService” function have used:
͐ Operation as “GetListItems” as we want list items from the list
͐ Kept async as false
͐ Used listName as “Items” and column name as “ItemNumber”
͐ Defined CAMLViewFields and CAMLQuery
Once the parameters provided above matches and gets validated, the “completeFunc” will be executed which will:
͐ Go through the “z:row” as it will hold the values returned by the SPService
͐ Add the provided column name to the array
͐ Index value will be increased by 1
Once “completeFunc” gets executed, the textbox will be used to bind the data to its datasource which we have in an array i.e. “itemSource”
