jquery autocomplete auto-fill-Feld mit 1. Wert und highligh Teil Hinzugefügt

Leider gibt es keine vorhandene option für Sie. Glücklicherweise gibt es eine ziemlich einfache Möglichkeit, es zu tun mit den Ereignissen geliefert mit JQuery Autocomplete. Überprüfen Sie heraus dieses JSFiddle: http://jsfiddle.net/RyTuV/133/

Als Sie feststellen, die maßgeblich code, den Sie hinzufügen möchten, verwendet die JQuery Autocomplete Open-Ereignis:

Ausgelöst, wenn der Vorschlag-Menü wird geöffnet oder aktualisiert werden.

Durch dieses Ereignis ausgelöst werden, können Sie den text des ersten Elements in der Liste zu dem, was bereits geschrieben, in das Eingabefeld und markieren Sie dann aus, nachdem die Eingabe von text am Ende von den hinzugefügten text:

$(this).autocomplete({
    source: function(request, response) {
                $.ajax({ url: 'clinic/auto',
                data: { 'term': this.term,'name': this.element.attr('complete')},
                dataType: "json",
                type: "POST",
                success: function(data){
                    response(data);
                }
            });
    },
    minLength: 2,
    open: function( event, ui ) {
        var firstElement = $(this).data("autocomplete").menu.element[0].children[0]
           , inpt = $('#autocomplete')
           , original = inpt.val()
           , firstElementText = $(firstElement).text();

        /*
           here we want to make sure that we're not matching something that doesn't start
           with what was typed in 
        */
        if(firstElementText.toLowerCase().indexOf(original.toLowerCase()) === 0){
            inpt.val(firstElementText);//change the input to the first match

            inpt[0].selectionStart = original.length; //highlight from end of input
            inpt[0].selectionEnd = firstElementText.length;//highlight to the end
        }
    }
});

Verwenden Sie diese als Vorlage, könnte man loop durch die Elemente im Menü zu finden, das erste Spiel beginnt damit, dass sich die Eingabe von text, und verwenden Sie diese zu füllen und zu markieren, statt nur mit dem ersten Element.

Fand die Antwort oben, aber es hat den dropdown aus jqueryUI also begann ich ein Skript für meine eigene. Und beschlossen, es hier zu posten. Arbeiten jsfiddle: https://jsfiddle.net/wb3kpxaj/

Code:

/* Need jquery to be extended with code snippet for selectrange i found somewhere, but forgot where...: */
$.fn.selectRange = function(start, end) {
  var e = document.getElementById($(this).attr('id')); //I don't know why... but $(this) don't want to work today :-/
  if (!e) return;
  else if (e.setSelectionRange) { e.focus(); e.setSelectionRange(start, end); } /* WebKit */ 
  else if (e.createTextRange) { var range = e.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', start); range.select(); } /* IE */
  else if (e.selectionStart) { e.selectionStart = start; e.selectionEnd = end; }
  return $(e); };

autofill=['Banana', 'Banonas', 'Appel', 'Appelpie', 'Other', 'OtherMoreSpecific', 'OtherMoreDifferent'];

$('#autofill').on('keyup', function(e) {
   unvalidInputKeys=[8,9,13,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,91,92,93,112,113,114,115,116,117,118,119,120,121,122,123,144,145];
  if($(this).val().length>0&&!unvalidInputKeys.includes(e.keyCode)) {
    for(i=0;i<autofill.length;i++) {
      if(autofill[i].startsWith($(this).val())) {
        userTypedLength=$(this).val().length;
        $(this).val(autofill[i]);
        $(this).selectRange(userTypedLength, autofill[i].length);
        return;
        }
      }
    }
  });