web-dev-qa-db-ger.com

jQuery ui autocomplete, wenn der Benutzer keine Option aus der Dropdown-Liste auswählt

Was tun Sie bei Verwendung des jquery-Autocomplete-Plugins , wenn der Benutzer kein Element in der Liste auswählt, sondern stattdessen einen gültigen Wert und Tabulatoren eingibt?

zB wenn die Auto-Completion-Liste Folgendes enthält:

Cat
Dog
Fish 

Und der Benutzer gibt cat ein, wählt jedoch Cat nicht aus der Dropdown-Liste der Autovervollständigung aus und wechselt stattdessen die Tabs. Da sie kein Element aus der Liste ausgewählt haben, wird das Ereignis zum automatischen Vervollständigen der Auswahl nicht ausgelöst und wir verlieren die Möglichkeit, darauf zu reagieren:

$('#Animal').autocomplete({
    source: url,
    minlength: 1,
    select: function (event, ui) {
        $("#Animal").val(ui.item.value);
        changeUsersAnimal(ui.item.id);
    }
});

Wie gehe ich mit diesem Fall um?

26
JK.

Sie suchen wahrscheinlich nach Scott González 'autoSelect extension . Durch das Hinzufügen dieser Erweiterung auf der Seite wird das Ereignis select ausgelöst, wenn der Benutzer einen gültigen Wert eingibt und keine Änderungen an Ihrem Ende erforderlich sind:

/*
 * jQuery UI Autocomplete Auto Select Extension
 *
 * Copyright 2010, Scott González (http://scottgonzalez.com)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * http://github.com/scottgonzalez/jquery-ui-extensions
 */
(function( $ ) {

$.ui.autocomplete.prototype.options.autoSelect = true;
$( ".ui-autocomplete-input" ).live( "blur", function( event ) {
    var autocomplete = $( this ).data( "autocomplete" );
    if ( !autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }

    var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" );
    autocomplete.widget().children( ".ui-menu-item" ).each(function() {
        var item = $( this ).data( "item.autocomplete" );
        if ( matcher.test( item.label || item.value || item ) ) {
            autocomplete.selectedItem = item;
            return false;
        }
    });
    if ( autocomplete.selectedItem ) {
        autocomplete._trigger( "select", event, { item: autocomplete.selectedItem } );
    }
});

}( jQuery ));

Hier ist ein Beispiel mit der Erweiterung: http://jsfiddle.net/vFWUt/226/

15
Andrew Whitaker

Bei jQuery-Version> = 1.8.11 muss die Option autoFocus auf true gesetzt werden

$( ".selector" ).autocomplete({ autoFocus: true });

Dies hat den zusätzlichen Vorteil, dass automatisch der erste Eintrag in der Liste ausgewählt wird, sodass der Benutzer einfach die Eingabetaste oder die Tabulatortaste drücken kann, um ihn auszuwählen, ohne den gesamten Namen eingeben zu müssen. 

16
Marques

Fügen Sie ein benutzerdefiniertes Ereignis von onchange hinzu

$('#Animal').change(function(){
    var selectedValue = this.value;
    // Do what you want here:
    ...
});

Oder verwenden Sie das integrierte change-Ereignis des Widgets:

$('#Animal').autocomplete({
    source: url,
    minlength: 1,
    select: function (event, ui) {
        $("#Animal").val(ui.item.value);
        changeUsersAnimal(ui.item.id);
    }
   change: function(event, ui) { // <=======
       // ... 
       // ...
   }
});

Quelle

7
gdoron

Für jQuery UI 1.9.2 musste ich in der Antwort von Andrew Whitaker die AutoSelect-Erweiterung von Scott González ein wenig ändern:

var item = $( this ).data( "item.autocomplete" );

sein

var item = $( this ).data( "uiAutocompleteItem" );

und dann funktioniert es perfekt.

6
trushkevich

Sie können so verwenden

$("#inputbox").autocomplete({
    source : reuesturl,
    minLength : 1,
    select : function(event, ui) {
        $("#inputbox").attr('rel',ui.item.label);
    },
    open : function() {
        $("#inputbox").attr('rel', 0);
    },
    close : function() {                    
        if ($("#inputbox").attr('rel')=='0')
            $("#inputbox").val('');
    }
});
3

Für jQuery UI - v1.11.0 musste ich ein bisschen Scott González 'autoSelect extension wie folgt ändern.

/*
 * jQuery UI Autocomplete Auto Select Extension
 *
 * Copyright 2010, Scott González (http://scottgonzalez.com)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * http://github.com/scottgonzalez/jquery-ui-extensions
 */
$().ready(function () {
    $.ui.autocomplete.prototype.options.autoSelect = true;
    $(".ui-autocomplete-input").change(function (event) {
        var autocomplete = $(this).data("uiAutocomplete");

        if (!autocomplete.options.autoSelect || autocomplete.selectedItem) { return; }

        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
        autocomplete.widget().children(".ui-menu-item").each(function () {
            var item = $(this).data("uiAutocompleteItem");
            if (matcher.test(item.label || item.value || item)) {
                autocomplete.selectedItem = item;
                return false;
            }
        });

        if (autocomplete.selectedItem) {
            autocomplete._trigger("select", event, { item: autocomplete.selectedItem });
        }
    });
});

Und musste die erweiterte Autocomplete-Option autoSelect: true in meiner Autocomplete-Definition anwenden.

Ich habe ein bisschen Code aus diesen Antworten genommen.

  1. trushkevich
  2. gdoron und
  3. Cagatay Kalan

BEARBEITEN

Hier ist meine Definition der automatischen Vervollständigung, falls jemand interessiert ist.

$("your selector").autocomplete({
    // Below filter looks for the values that start with the passed in string
    source: function (request, response) {
        var matches = $.map(yourSourceArray, function (acItem) {
            if (acItem.toUpperCase().indexOf(request.term.toUpperCase()) === 0) {
                return acItem;
            }
        });
        response(matches);
    },
    // one can directly pass the source array instead like,
    // source: yourSourceArray
    autoSelect: true,
    autoFocus: true,
    minLength: 3,
    change: function (event, ui) {
        if (ui.item) {
            // do whatever you want to when the item is found
        }
        else {
            // do whatever you want to when the item is not found
        }
    }
})
2
Devraj Gadhavi

Der folgende Code ist ein kleiner Tweak auf Scott's Erweiterung, um mit jquery Version 1.10.3 zu funktionieren. Ich habe den folgenden Code nur mit Version 1.10.3 getestet.

(function($) {

$.ui.autocomplete.prototype.options.autoSelect = true;
$( ".ui-autocomplete-input" ).live( "blur", function( event ) {
    var autocomplete = $( this ).data( "ui-autocomplete" );
    if ( ! autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }

    var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" );
    autocomplete.widget().children( ".ui-menu-item" ).each(function() {
        var item = $( this ).data( "ui-autocomplete-item" );
        if ( matcher.test( item.label || item.value || item ) ) {
            autocomplete.selectedItem = item;
            return false;
        }
    });
    if ( autocomplete.selectedItem ) {
        autocomplete._trigger( "select", event, { item: autocomplete.selectedItem } );
    }
});
}(jQuery));
1
Kanagu

Scott Gonzalez 'Code wurde aktualisiert, um mit Jquery-UI 1.12 zu funktionieren

(function($) {

    $.ui.autocomplete.prototype.options.autoSelect = true;
    $('body').on('blur', '.ui-autocomplete-input', function(event) {
        var autocomplete = $(this).data('ui-autocomplete');
        if (!autocomplete.options.autoSelect || autocomplete.selectedItem) { return; }

        var matcher = new RegExp($.ui.autocomplete.escapeRegex($(this).val()), 'i');
        autocomplete.widget().children('.ui-menu-item').each(function(index, item) {
            var item = $( this ).data('uiAutocompleteItem');
            if (matcher.test(item.label || item.value || item)) {
                autocomplete.selectedItem = item;
                return false;
            }
        });

        if (autocomplete.selectedItem) {
            autocomplete
            ._trigger('select', event, {item: autocomplete.selectedItem});
        }
    });

}(jQuery));
0

Ich hatte Probleme mit dieser Funktion in einer Seite, die jquery 1.9.1 und jquery-ui 1.10.3 verwendet. Basierend auf dem Code von Scott Gonzalez und den hier vorgeschlagenen Vorschlägen und ein paar Stunden Thrashing kam ich auf folgendes. Hinweis: Ich wollte eine Lösung, bei der der Benutzer nur einen der von Autocomplete vorgeschlagenen Werte eingeben darf. Ich wollte jedoch zulassen, dass der Benutzer nur einen der zulässigen Werte eingibt, ohne ihn aus der Dropdown-Liste auszuwählen: 

/*
 * jQuery UI Autocomplete Auto Select Extension
 *
 * v 1.10
 * Jomo Frodo ([email protected])
 * 
 * This version requires an autoSelect parameter to be set on the autocomplete widget
 * 
 * e.g.,
 *      $("#autoCompleteID").autocomplete({
            source:url,
            minLength:1,
            autoSelect: true
        });
 * 
 * Based on an extension by Scott González (http://scottgonzalez.com) 
 * http://blog.jqueryui.com/2010/08/extensible-autocomplete/
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * http://github.com/scottgonzalez/jquery-ui-extensions
 */

$(window).load(
        function() {

            //$.ui.autocomplete.prototype.options.autoSelect = true; 
            // Doesn't appear to work in ui 1.10.3
            // Must set the 'autoSelect' param on the autocomplete widget to get this to work.

            $(".ui-autocomplete-input").bind('autocompleteresponse',
                    function(event, ui) {
                        $(this).data('menuItems', ui.content);
                    });

            $(".ui-autocomplete-input").on(
                    "blur",
                    null,
                    function(event) {
                        var autocomplete = $(this).data("uiAutocomplete");
                        if (!autocomplete.options.autoSelect
                                || autocomplete.selectedItem) {
                            return;
                        }

                        var matcher = new RegExp("^"
                                + $.ui.autocomplete.escapeRegex($(this).val())
                                + "$", "i");
                        var menuItems = $(this).data('menuItems');
                        for (idx in menuItems) {
                            var item = menuItems[idx];
                            if (matcher.test(item.value)) {
                                autocomplete.selectedItem = item;
                                break;
                                // return false;
                            }
                        }
                        if (autocomplete.selectedItem) {
                            autocomplete._trigger("select", event, {
                                item : autocomplete.selectedItem
                            });
                        } else {
                            this.value = '';
                        }
                    });

        });
0
jomofrodo

verwenden Sie autoFocus: true

$('#Animal').autocomplete({
    source: url,
    **autoFocus: true,**
    minlength: 1,
    select: function (event, ui) {
        $("#Animal").val(ui.item.value);
        changeUsersAnimal(ui.item.id);
    }
});
0
Vijay Waghmare

Dieser Code wird nur einmal ausgewählt. Alle anderen tun danach nichts. Irgendwelche Ideen?

Edit: Ich habe diese Zeile auskommentiert und es funktioniert jetzt. Ich weiß nicht warum.

if ( !autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }
0
Clutch