In Autofill-Funktionen zu jQuery-UI 1.8.1

Question

Hier ist, was ich derzeit habe, leider kann ich nicht scheinen, um herauszufinden, wie autoFill zur Arbeit mit jQuery-UI zu bekommen ... es an der Arbeit mit den verwendeten gerade nach oben Autocomplete.js

<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>

Meine JSON in dem Back-End wie folgt aussieht

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

habe ich die Antwort hier verwendete die mustMatch zum Laufen zu bringen, aber leider, wenn ich „Tab“ weg von dem Eingabefeld oder wenn ich das Wort gebe vollständig anstatt tatsächlich den vorgeschlagenen Text auswählen, bekomme ich die „Nichts ausgewählt“ Antwort anstelle einem Wert und ID.

Wer weiß, wie die ID aus dem Autovervollständigen zu extrahieren, wenn Sie tatsächlich das Feld nicht wählen?

---

Im Grunde, was ich suche ist etwas ähnlich dem Month (local): Beispiel finden Sie hier: http: //jquery.bassistance.de/autocomplete/demo/

Aber offensichtlich mit dem jQuery-UI anstelle der jquery.autocomplete.js

Answer 1

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

Hier ist ein Link . zu einem github solutiuon Dies wird das erste Element in der Liste, wenn Sie mit der Tabulatortaste aus dem Feld automatisch aus, und hat „Select: true“. Set als Option auf dem automatische Vervollständigung Anruf

(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 wie folgt aus:

nicht sicher, ob das, was Sie wollen, trotzdem ist es autofill ganzes Wort, wenn Spiel etwas!

$(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 Autofill wollen dies ist der Code, 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());
        }
    });