在ASP.Net中使用jQuery AutoComplete插件-自动完成时提交

Question

Hi I'm using jQuery AutoComplete Plugin in ASP.Net as outlined in the article below, so that as a user types in a .Net textbox they get a list of options to choose them. This works fine, but what I need to do now is call a server side function when the user has finished typing or has choosen a value, rather than the user having to submit the value by pressing a button.

any suggestions for the best way of doing this?

Thanks for your help!

http://www.aspsnippets.com/Articles/Using-jQuery-AutoComplete-Plugin-in-ASP.Net.aspx

Answer 1

Depends what kind of server-side action you need to perform. If you simply want to submit your form, that's a jQuery one-liner in response to the jQuery.autocomplete's result event:

$('input#suggest').result(function(event, data, formatted) {
   $("#myform").submit();
});

If you want to perform an asynchronous call to a specific method, you should look into $.ajax in jQuery. On the server side you have a slew of possibilities - you can setup your function as a generic HTTP handler, a JSON web service, or an ASP.NET Page Method, all of which can be called using AJAX.

If you can provide more information what you need to achieve (as comment to my answer), I can provide more details.

Edit: Using the details provided in comments, I believe in your case you can use your control's ClientID as follows:

var selector = '#<%= searchTB.ClientID %>';
$(selector).result(function(event, data, formatted) {
   CustomSubmit();
});

In which case the javascript needs to be in-lined in the .aspx document, ie cannot be in an external .js file.

Answer 2

$(document).ready(function() { $("#<%=searchTB.ClientID%>").autocomplete('Search_VB.ashx');

        var selector = '#<%=searchTB.ClientID%>';
        $(selector).result(function(event, data, formatted) {
           CustomSubmit();
        });

    });  

for anyone looking to add this to the code from the originally stated article, above this how it's done (and called the Javascript function CustomSubmit())