jQuery Autocomplete mit Focusout-Lösung

Question

Ich möchte das Eingabefeld automatisch ausfüllen, wenn der Benutzer den richtigen Wert eingibt und das Eingabefeld ausblendet. Ein Beispiel dafür ist https://www.redbus.in/ Ich benutze URL-String, um Datenanforderung zu senden, und danach das Ergebnis erhalten. Ich möchte weiterhin die Datenanforderung senden und Ergebnisse erhalten, selbst wenn der Benutzer das Feld entdeckt? Dann muss der erste Wert der Liste mit Ergebnissen ausgewählt werden. DANKE FÜR DIE HILFE!

Mein Code ist:

jQuery(document).ready(function(){ 
    jQuery("#econt_offices_town").autocomplete({ 
     minLength: 2, 
     autoFocus: true, 
     source: function(request, response) { 
      jQuery.ajax({ 
       url: ajaxurl, 
       dataType: "json", 
       data: { 
        action:'handle_ajax', 
        city: request.term 
       }, 
       success: function(data) { 
        response(jQuery.map(data, function(item) { 
            return { 
             label:  item.label, 
             value:  item.value, 
             city_id: item.id, 
             post_code: item.post_code   
            }; 
          })); 
       }, //end of success 
      }); //end of ajax 
     }, //end of source 
     select: function(event, ui) { 
      var city_id = ui.item.city_id; 
      var post_code = ui.item.post_code; 
      jQuery('#econt_offices_postcode').val(post_code); 
      jQuery('#office_locator').show(); //show office locator button after the city is selected 
      jQuery('#econt_offices_postcode, label[for="econt_offices_postcode"], #econt_offices, label[for="econt_offices"]').show(); 
      jQuery.ajax({ 
       url: ajaxurl, 
       dataType: "json", 
       data: { 
        action:'handle_ajax', 
        office_city_id: city_id, 
        delivery_type: 'to_office' 
       }, 
       success: function(data) { 
        jQuery('#econt_offices').empty() 
        jQuery.each(data, function(key, value) { 
         jQuery('#econt_offices').append(jQuery("<option/>", { 
           value: value.id, 
           text: value.value + ' [о.к.:' + value.id + ']' 
         })); 
        }); 
        calculate_loading(); //calculate loading cost for shipping to office 
       } //end of success 
      }); //end of ajax 
     }, //end of select 
    }); //end of #econt_offices_town .autocomplete 

Answer 1

Versuchen Sie, die einige zusätzliche Event-Management mit einigen kreativen Einsatz hinzufügen.

Wenn ich verstehe, Sie möchten einen Wert auszuwählen, wenn jemand tabs oder woanders klickt (Fokus verloren)

$("#econt_offices_town").on('keydown focusout', function(event) { 
    if (event.keyCode != $.ui.keyCode.TAB && !(event.type == "focusout")) return; 

    event.keyCode = $.ui.keyCode.DOWN; 
    event.type = "keydown";//change the event from focusout 
    $(this).trigger(event); 

    event.keyCode = $.ui.keyCode.ENTER; 
    $(this).trigger(event); 
}); 

Answer 2

ich habe es. Dies ist die automatische Auswahl, wenn nur ein Wert in der Liste enthalten ist. Ich habe diesen Code zwischen "Quelle" und "Select"

response: function(event,ui) { 
      if (ui.content.length == 1) { 
       ui.item = ui.content[0]; 
       jQuery("#econt_offices_town").data('ui-autocomplete')._trigger('select', 'autocompleteselect', ui); 
       jQuery("#econt_offices_town").autocomplete('close'); 
      } 
     },