JQuery AutoComplete plugin in ASP.Net page from C #
I am trying to write JQuery using the AutoComplete plugin to display a list of names to the user when the user starts typing names (see code below). The code works fine unless the user starts backing up to change the name of the user entered, which forces him to overwrite the existing values in the autocomplete results. Is there something I'm doing wrong here, perhaps using the keyup function to trigger autocomplete, or is there a way to clear the existing autocomplete results if the user starts a backup?
Here is the JQuery code in the markup file in Default.aspx:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/jquery.autocomplete.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$("#example").keyup(function() {
$.ajax({
type: "POST",
url: "Default.aspx/GetCustomerNames",
data: "{ searchParam: '" + $("#example").val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#example").autocomplete(msg.d,
{ scroll: false, max: 10, width: 250, selectFirst: true });
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Customer Name: <input id="example" autocomplete="off" type="text" />
</div>
</form>
</body>
</html>
And here is the code in my Default.aspx.cs codebehind returning data:
[WebMethod]
public static string[] GetCustomerNames(string searchParam)
{
List<string> data = new List<string>() { "Andrew", "Ramona", "Russ", "Russell", "Raymond", "Annette", "Anthony" };
List<string> names = new List<string>();
foreach (string s in data)
{
if (s.ToLower().StartsWith(searchParam))
{
names.Add(s);
}
}
return names.ToArray();
}
source to share
I was under the impression that you can specify the search page as the first parameter of the autocomplete function.
$(document).ready(function(){
$("#example").autocomplete("Default.aspx/GetCustomerNames", { scroll: false, max: 10, width: 250, selectFirst: true });
});
Something like this, you might need to figure out the correct use cases to get it to do what you want, but at least it won't reset autocomplete after every keyboard.
source to share