Hinzufügen von autoFill-Funktionen zu jQuery-UI 1.8.1

Question

Hier ist, was ich derzeit habe, leider kann ich nicht herausfinden, wie man autoFill um mit jQuery-UI zu arbeiten... Es verwendet, um mit der geraden bis Autocomplete.js arbeiten

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.1.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

    var thesource = "RegionsAutoComplete.axd?PID=3"
    $(function () {
        function log(message) {
            $("<div/>").text(message).prependTo("#log");
            $("#log").attr("scrollTop", 0);
        }

        $.expr[':'].textEquals = function (a, i, m) {
            return $(a).text().match("^" + m[3] + "$");
        };

        $("#regions").autocomplete({
            source: thesource,
            change: function (event, ui) {
                //if the value of the textbox does not match a suggestion, clear its value
                if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
                    $(this).val('');
                }
                else {
                    //THIS IS CURRENTLY NOT "LOGGING" THE "UI" DATA
                    //IF THE USER DOES NOT EXPLICITLY SELECT
                    //THE SUGGESTED TEXT
                    //PLEASE HELP!!!
                    log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
                }
            }
        }).live('keydown', function (e) {
            var keyCode = e.keyCode || e.which;
            //if TAB or RETURN is pressed and the text in the textbox does not match a suggestion, set the value of the textbox to the text of the first suggestion
            if ((keyCode == 9 || keyCode == 13) && ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0)) {
                $(this).val($(".ui-autocomplete li:visible:first").text());
            }
        });
    });

</script>

Mein JSON im Backend sieht wie folgt aus

[
    { "label": "Canada", "value": "Canada", "id": "1" },
    { "label": "United States", "value": "United States", "id": "2" },
]

Ich habe die Antwort aquí um mustMatch zum Laufen zu bringen, aber wenn ich das Eingabefeld mit der Tabulatortaste verlasse oder das Wort vollständig eingebe, anstatt den vorgeschlagenen Text auszuwählen, erhalte ich leider die Antwort "Nichts ausgewählt" anstelle eines Werts und einer ID.

Weiß jemand, wie man die ID aus der Autovervollständigung extrahiert, wenn man das Feld nicht wirklich auswählt?

---

Was ich suche, ist im Grunde etwas Ähnliches wie die Month (local): Beispiel gefunden HIER: http://jquery.bassistance.de/autocomplete/demo/

Aber natürlich ist die Verwendung der jQuery-UI anstelle der jquery.autocomplete.js

Answer 1

AutoFill wurde in der JQuery UI-Version von autocomplete veraltet, und das jquery.autocomplete-Plugin wird nicht mehr unterstützt.

Hier ist ein Link zu einer Github-Lösung. Dadurch wird automatisch das erste Element in der Liste ausgewählt, wenn Sie das Feld mit der Tabulatortaste verlassen und "selectFirst: true" als Option für den Aufruf der automatischen Vervollständigung festgelegt haben.

(function( $ ) {

$( ".ui-autocomplete-input" ).live( "autocompleteopen", function() {
    var autocomplete = $( this ).data( "autocomplete" ),
        menu = autocomplete.menu;

    if ( !autocomplete.options.selectFirst ) {
        return;
    }

    menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first() );
});

}( jQuery ));

Answer 2

DEMO: http://jsbin.com/akile3

AKTUALISIERT 2: mit TAB-Unterstützung! ;)

DEMO: http://jsbin.com/akile3/8

Versuchen Sie etwas in dieser Art:

Ich bin mir nicht sicher, ob es das ist, was Sie wollen, jedenfalls füllt es automatisch das ganze Wort aus, wenn es mit etwas übereinstimmt!

$(function() {
 var json_source = [
        { "label": "Canada", "value": "Canada", "id": "1" },
        { "label": "United States", "value": "United States", "id": "2" }];

    $('<span id="hold"></span>').insertAfter('#regions');
    var $text_was = $('#hold');
    var $log = $('#log');

    $("#regions").autocomplete({
        minLength: 3,
        source: json_source,
        open: function(event, ui) {
            var first_option = $('.ui-autocomplete li:eq(0) a').text();
            $(this).text(first_option);
            $text_was.text(first_option);
        },
        change: function(event, ui) {
          var prev_text = $text_was.text() ? $text_was.text() : json_source[0].value ;
            $log.empty();
            var message = (prev_text != this.value) ? 
            'Nothing selected, input was ' + prev_text : 
            'Selected: ' + ui.item.value + ' aka ' + ui.item.id;
            if (prev_text != this.value) 
              $(this).val( prev_text  );

            $log.append(message);
        },
        select: function(event, ui) {
            $text_was.text(ui.item.value);
            $(this).blur();
        }
    }).blur(function(){
      if( this.value == '' )
     $(this).autocomplete('search', json_source[0].value );
    return false;
  });
});

Answer 3

Wenn Sie einfach nur automatisch ausfüllen möchten, ist dies der Code, den ich verwende.

$("#regions").autocomplete({
        source: thesource
    }).live('keydown', function (e) {
        var keyCode = e.keyCode || e.which;
        //if TAB or RETURN is pressed set the value of the textbox to the text of the first suggestion
        if ((keyCode == 9 || keyCode == 13) && $(".ui-autocomplete").is(":visible")) {
            $(this).val($(".ui-autocomplete li:visible:first").text());
        }
    });