it-swarm.com.de

Jquery UI-Autovervollständigung; minLength: 0 Ausgabe

Ich verwende eine automatische JQuery-Benutzeroberfläche. Ich gebe die minimale Länge an. Wenn Sie minLength:2 angeben, muss ich 2 Zeichen eingeben, bevor der Dienst ausgelöst wird. Wenn ich minLength:1 spezifiziere, muss ich nur ein Zeichen eingeben, bevor der Quelldienst ausgelöst wird.

Wenn ich jedoch minLength:0 eingebe, muss ich noch ein Zeichen eingeben. Was ist der Sinn von 0? Wie ist es anders als 1? Das erwartete und erwünschte Verhalten wäre, dass es ausgelöst wird, sobald die Eingabe den Fokus hat ...?

Ideen?

Update: Meist funktioniert die Lösung von karim. Wenn Sie auf die Eingabe klicken, werden die Optionen angezeigt. Wenn Sie auf eine klicken, wird die Quelle erneut mit der Zeichenfolge empty und nicht mit der Option new versehen. Dies wurde soeben ausgewählt, so dass die Optionen für die automatische Vervollständigung nach Auswahl einer Option sind, als wäre die Box leer.

37
kralco626

Schauen Sie sich die Dokumentation zu search an:

Löst ein Suchereignis aus, das wann Daten sind verfügbar, dann wird angezeigt die Vorschläge; kann von einem .__ verwendet werden. selectbox-artige Schaltfläche zum Öffnen von Vorschläge beim Anklicken. Wenn kein Wert Argument angegeben, das aktuelle Eingangswert wird verwendet. Kann aufgerufen werden mit einer leeren Zeichenfolge und minLength: 0 um alle Artikel anzuzeigen.

var source = ['One', 'Two', 'Three', 'Four'];

var firstVal = source[0];

$("input#autocomplete").autocomplete({
    minLength: 0,
    source: source,
}).focus(function() {
    $(this).autocomplete("search", $(this).val());
});
.ui-menu-item{
  background : rgb(215, 215, 215);;  
  border : 1px solid white;
  list-style-type: none;
  cursor : pointer;
}

.ui-menu-item:hover{
  background : rgb(200, 200, 200);
}


.ui-autocomplete{
   padding-left:0;
   margin-top  : 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<input id="autocomplete"/>&nbsp;<input id="submit" type="submit"/>

54
karim79

Ich verstehe durch Experiment, warum die akzeptierte Antwort (ich stimmte zugestimmt) als etwas unvollständig betrachtet werden kann. Ich habe ein bisschen Absicht hinzugefügt, um die UX wie eine Combo-Box zu gestalten:

$('#Carrier').autocomplete(
{
    source: '@Url.Action("AutocompleteCarrier", "Client")',
    minLength: 0,
    select: function (event, data) {
        $(this).autocomplete('disable');
    }
})
.blur(function(){
    $(this).autocomplete('enable');
})
.focus(function () {
    $(this).autocomplete('search', '');
});
6
rasx

Ich hatte das gleiche Problem und habe es so gelöst. Ich denke, der folgende Code macht es viel klarer, welcher Text an den Autocompletion-Dienst gesendet wird, wenn das Feld den Fokus erhält. Es ist insbesondere klar, warum es funktioniert, wenn das Feld bereits etwas enthält.

$(function() {
$("input#autocomplete").autocomplete({
        source: "completion.html",
        minLength: 0,
        select: function( event, ui ) {}
    });
});
$("input#autocomplete").focus(function() {
    $(this).autocomplete("search", $(this).val());
});
3
Luca

Das funktioniert eigentlich! Getestet auf IE, FireFox

$("input#autocomplete").autocomplete({
minLength: 0,
source: source,
}).focus(function() {
        setTimeout( "if ($('#input#autocomplete').val().length == 0) $('#input#autocomplete').autocomplete(\"search\", \"\"); ",1);
    });
1
Victor

Ich hatte das gleiche Problem und bekam die Möglichkeit, dieses Problem zu umgehen.

Das Problem ist, dass, wenn eine Option ausgewählt wurde, die Eingabe fokussiert ist, dies search ohne Filter ausführt und die autocomplete erneut anzeigt.

Dieses Problem tritt nicht auf, wenn Sie über die Tastatur auswählen, da input bereits im Fokus ist, sodass der Code in focus nicht erneut ausgeführt wird.

Um dieses Problem zu umgehen, müssen wir wissen, wann der Fokus durch ein Maus-/Keyboar-Ereignis ausgelöst wird.

jQuery("input#autocomplete").focus(function(e) {
    if(!e.isTrigger) {
        jQuery(this).autocomplete("search", "");
    }
    e.stopPropagation();
});

e.isTrigger wird von jQuery verwendet, um zu identifizieren, wann event automatisch oder vom Benutzer ausgelöst wurde.

Arbeitsdemo

das Vorschlagsmenü wird zum zweiten Mal angezeigt, da durch Klicken auf ein Element im Vorschlagsmenü das Textfeld wieder den Fokus erhält. Der Textwert wird jedoch nicht aktualisiert, wenn der Fokus erneut ausgelöst wird.

Ich weiß nicht, wie wir das beheben können, aber lassen Sie es mich wissen, wenn jemand von Ihnen das gleiche Problem hat

0
PradGar

Ich weiß, dass dies ein sehr alter Thread ist, aber ich habe genau das gleiche Problem und keine der oben angegebenen Lösungen scheint zu funktionieren ... Ich gehe davon aus, dass dies auf Updates in Jquery zurückzuführen ist. Wenn jemand ein funktionierendes aktualisiertes Beispiel (d. H. Jquery-1.12.4.js // 1.12.1/jquery-ui.js) veröffentlichen könnte, wäre das fantastisch.

0
Paul Clift