0

  1. I have jQuery UI autocomplete input with AJAX source where I want to show the label in suggestions and textbox when selected, but I want the id for further search. How can I get the id behind the scenes so I can use it for further search, but keep showing label on front?

  2. Also suggestions (results) are too many and shows a big scroll on the page, is there any way to restrict or show only few records at a time based on what user types? Here is my code so far: (so far suggestions/selection is working but its passing label/value for further search)

HTML: 

<input type="text" name="CountyID" id="CountyID">

JSON:

[{"countyid":1302010,"name":"Fort Bend"},{"countyid":1011416,"name":"Houston"},{"countyid":1166827,"name":"Harris"}

jQuery/AJAX:

$("#ShowID").autocomplete({
    source: function (request, response) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        $.ajax({
            url: 'path/listCounty',
             type: 'GET',
             data: {State:StateID},
             dataType: 'json',
             success: function (data) {
                response($.map(data.slice(0,10), function(v,i){
                    var text = v.name;
                    if ( text && ( !request.term || matcher.test(text) ) ){
                       return {
                               label: v.name,
                               value: v.name,
                               id: v.countyID
                              };
                        }
                }));
            }
        });
        },
        minLength:2,
        delay: 100,

        select: function(event, ui) {
             var e = ui.v;
             var result = "value= " + e.id;
              $("#ShowID").append(result);

        }
    });
user2675939
  • 361
  • 2
  • 6
  • 22

1 Answers1

0

  1. You can save the selected countyId in hidden field on call "select" autocomplete function and use that value for further search

  2. Refer this same question as yours https://stackoverflow.com/a/7617637/4868839. Also, if you already know how many results to show you can limit the response from server side itself which will also be performance efficient.

Community
  • 1
  • 1
User3250
  • 2,961
  • 5
  • 29
  • 61
  • 1. I didn't wanted to restrict the number of records from server side, just didn't want the text box to show all of them at once, something like I type in one letter and it shows only best matching 10-15 records and may be show more depending on what user types. i tried slice function but that only shows me fixed 10 records no matter what user types, it doesn't filter based on the user typing (see the code updated) – user2675939 May 03 '17 at 13:38