Hi All,
Recently I had a situation to give an Auto Complete TextBox
control in my application (Visual Web part) using JQuery. I have done this by refereeing
the below link
Link: Reference
The datasource is a simple JavaScript array, provided to the widget using the source-option.
Now get works the JQuery in SharePoint 2010 Visual webpart
I have added two js files and one css file in my solution to
work the JQuery and give proper style to the textbox and menu items. You can
download the js files and css file from the below link
Then, I written the script and get the array of keywords (Programming
languages) and assigned to the source option. Refer the below code snippet:
<script src="/_layouts/1033/STYLES/jqueryCustom-1.7.1.min.js"
type="text/javascript"></script>
<script src="/_layouts/1033/STYLES/jqueryCustom-ui-1.18.min.js"
type="text/javascript"></script>
<SharePoint:CssRegistration ID="cssReg" runat="server" Name="/_layouts/1033/STYLES/jquery-uiCustom.css">
</SharePoint:CssRegistration>
<script type="text/javascript">
Sys.Application.add_load(wireEvents);
function wireEvents()
{
$(function ()
{
var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C",
"C++","Clojure","COBOL","ColdFusion","Erlang",
"Fortran","Groovy","Haskell","Java","JavaScript",
"Lisp","Perl","PHP","Python","Ruby","Scala",
"Scheme"];
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*='txtKeyword']")
// 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)
{
event.preventDefault();
}
})
.autocomplete(
{
minLength: 0,
source: function
(request, response)
{
//
delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags,
extractLast(request.term)));
},
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);
// add
placeholder to get the comma-and-space at the end
terms.push("");
this.value
= terms.join(",");
this.value
+= " ";
return false;
}
});
});
}
</script>
Then added a asp:TextBox control
<asp:TextBox ID="txtKeyword" runat="server"></asp:TextBox>
Done, now deployed and added the webpart in my application.
Output:
I will post how to get the source items from SharePoint2010 list in my next post.
Cheers....................................
