JQuery Autocomplete memorandum, jqueryautocomplete

JQuery Autocomplete memorandum, jqueryautocomplete

I have used this widget before. Now I need it again. I can't remember many things. Of course, the previous versions are different.

Before using the tool, you must carefully read the official instruction documents and examples. This is very important, instead of looking for information on the Internet. Options, Methods, and Events are detailed. For details, refer to jQuery Autocomplete Widget api doc.

I need a text box that performs dom Operations Based on Dynamic Input, ajax get data source, and select results. This is a simple scenario. Of course, what I need is actually complicated. Let's talk about my problems first.

Use the code first:

function registerAuto() {    var autoId = "cust-code";    $("#" + autoId)        .autocomplete({            source: function(request, response) {                var term = $.trim(request.term);                //term.replace("$", "") only replace the first match one                if (term.length === 0 || $.trim(term.split("$").join("")).length === 0) {                    return;                }                $.ajax({                    url: "/order/aeo/customer",                    method: "post",                    dataType: "json",                    data: { keywords: term },                    success: function(data) {                        response(data);                    }                });            },            delay: 800,            autoFocus: true,            minLength: 2,            position: { my: "left bottom", at: "left top" },            select: function(event, ui) {                //console.log(ui);                showCustomer(ui.item.value);            },            change: function(event, ui) {                //console.log(ui);                if (!ui.item) {                    $("#" + autoId).val("");                    hideCustomer();                }            }        });}

　　

Question 1:

You need to modify the value of the selected text box.

There is an initial value. When the page is loaded, assign a value to the text box, perform the search automatically, and select the record (single item only has one result record ). The reason for this is that the select event needs to be triggered.

What should I do?

 

Solution:

1. The simplest way is to assign a value to the text box and manually call the method to be executed in the select statement without executing autocomplete.

 $(function() {     registerAuto();     $("#cust-code").val("@Model.CustomerCode");     showCustomer("@Model.CustomerCode"); });

The above code is fine, but I am very busy, that is, the autocomplete method is required to manually call its method to trigger the event.

 

2. I started to think that as long as the focus text box and the assigned text will trigger an automatic search event, and the results won't work at all.

I searched a lot of materials and found a solution using jquery autocomplete manually search's key information.

 $(function() {     registerAuto();     $("#cust-code").val("@Model.CustomerCode");     $("#cust-code").autocomplete("search"); });

The Code triggers the search event, but the question is, how can we implement the automatic select result? Click the tag Based on the generated items ui.

 $(function() {     registerAuto();     $("#cust-code").val("@Model.CustomerCode");     $("#cust-code").autocomplete("search");     setTimeout(function() {         $(".ui-menu-item").click();      }, 100);  });

Here, setTimeout is used to have enough time to wait for ajax to return results.

Well, the above problem is solved, but the ultimate problem should also be encountered by many people, but it needs to be solved urgently.

 

Question 2:

Ajax returns too many results. How can I obtain results dynamically by PAGE instead of loading the results at a time?

 

I thought of a solution: the search result has a scroll bar. When the scroll bar reaches the bottom, the next page is automatically loaded until all the results are loaded. In fact, the user may only load a few pages. If the result is not found, the user will change the keyword to search again.

However, the difficulty is: how to append the Dynamic Loading results to the data source of autocomplete, because other events (such as select) need.

The solution is to modify the autocomplete source code, add an extension method, or bind an event to the items ui, such as the scroll bar Loading Method and click select method.

 

Solution:

In short, it is not implemented at present. Do you have any suggestions?