jQuery-UI-Autocomplete-Verhalten. Wie bei der Suche nach freien text eingeben?

erste Frage (und hoffentlich, aber zweifelnd meine einzige)

Bin ich mit dem jQuery UI Autocomplete. Hier ist Beispielcode zu replizieren mein Problem.

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"];

$("#autocomplete").autocomplete({
    source: suggestions
});

Wenn ein Benutzer 'J' Sie werden präsentiert mit "Clojure' und 'JavaScript' als Anregungen.

Habe ich weggelassen Java aus dieser Liste, wenn der Nutzer will, um die Suche für Java geben Sie "Java", drücken Sie die enter-Taste, aber das Formular nicht Absenden. Wenn Sie ein Leerzeichen hinzufügen der 'JavaScript' Vorschlag verschwindet und das Formular abgeschickt werden kann durch drücken der enter-Taste.

Ich bin die Schaffung einer freien Suche, ich möchten, dass Benutzer in der Lage sein, die Suche durch drücken der EINGABETASTE, auch wenn es Anregungen zur Verfügung.

$("#autocomplete").keypress(function(event) {
  alert(event.keyCode);
  if (event.keyCode=='13') $this.closest('form').submit();
});

Ich versucht, die oben ich dachte, ich könnte manuell erkennen Einreichen Tastendruck und senden Sie das Formular, aber der Alarm zeigt alle Tasten erkannt werden, AUßER vorlegen, das scheint zu sein, unterdrückt von der autocomplete.

Jede Hilfe wird sehr geschätzt! Danke.

InformationsquelleAutor John | 2010-09-24

8

UPDATE

Musste ich ein paar änderungen, aber dieser code funktioniert auf meiner Seite nach, das zu tun. Erste, e.keycode sollte e.keyCode. Ich glaube nicht, dass der Fall wichtig, aber es funktioniert. Auch, stellen Sie sicher, dass Sie nicht das zitieren 13 wenn Sie überprüfen Sie den keyCode der enter-Taste. Wird es nicht ordnungsgemäß, wenn Sie so tun. Hier der neue code:
```
var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"];
$("#autocomplete").autocomplete({
    source: suggestions
}).keypress(function(e) {
    if (e.keyCode === 13) {
        $(this).closest('form').trigger('submit');
    }
});
```
Keypress-Funktion sollte wie folgt Aussehen, und Sie können auch Kette die autocomplete-und keypress-Funktionen machen es einfacher für Sie. Unten der code sollte funktionieren.
```
var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"];
$("#autocomplete").autocomplete({
    source: suggestions
}).keypress(function(e) {
    if (e.keycode === 13) {
        $(this).closest('form').trigger('submit');
    }
});
```
- Hi, ich Schätze Sie sich die Mühe der Antwort.
- Hoppla, scheint Stack-Überlauf hat das umgekehrte problem und geben Sie eingereicht meine Antwort anstelle der neuen Linie habe ich erwartet! Dieser code löst nicht das problem, aus irgendeinem Grund die enter-Taste, code '13' wird einfach nicht erkannt mit Tastendruck. Es ist wie seine wurde absichtlich deaktiviert, ich kann einfach nicht herausfinden, wie um ihn zu aktivieren! Wenn Sie erstellen ein div mit der id='Schlüssel' und fügen Sie die folgenden in das keypress-Funktion: $('#- Taste').text('Key:' + e.keyCode); und-Typ, den Sie sehen, was ich meine! Es wird nur empfangen '13' wenn es keine Vorschläge. Irgendwelche Ideen, wie es zu zwingen zu übermitteln, geben Sie? Danke!
- Vielen Dank für das update... funktioniert immer noch nicht auf mein Ende (ich benutzte Chrome, speichert Ihr browser eventuell anders behandeln?) aber ich habe es geschafft, es funktioniert auch hier. Blick auf die AutoVervollständigen-code hatte es ein keydown-binden, wo auf die enter-Taste gedrückt: wenn ( selbst.Menü.element.is( ":visible" ) ) { event.preventDefault(); } Dieser ist gestoppt, was die form der Einreichung auf eingeben (das default-Verhalten habe ich auch schon versucht zu wiederherstellen!). Mit diesem im Verstand, alles, was wir tun müssen ist, ersetzen Sie die Tastendruck-mit keydown und unser code funktioniert in den Browsern die ich probiert habe. Vielen Dank für Ihre Hilfe!
InformationsquelleAutor ryanulit

Ich hatte ein ähnliches problem, die jquery-ui-autocomplete-widget feuert das select-Ereignis, wenn der Benutzer wählt einen Vorschlag aus der Liste, ob der ausgewählte Vorschlag wurde angeklickt, oder die enter-Taste gedrückt wurde. Aber es Tat nichts, wenn der Benutzer text eingegeben und die EINGABETASTE gedrückt ohne die Auswahl einer Option aus der Liste. Wenn das passiert, muss ich eine Suche.

Es wurde einfach eine neue keypress event-handler, aber es befeuert, ob eine Auswahl gemacht wurde oder nicht. Also ich habe eine variable, didSelect zu gewährleisten, um den Auswahlzustand.

Hier die komplette Lösung:

$(function() {
var didSelect = false;

$( "#search" ).autocomplete({
    source: "/my_remote_search",
    minLength: 2,
    search: function (event, ui) {
        didSelect = false;
        return true;
    },
    select: function( event, ui ) {
        if (ui.item) {
            didSelect = true;
            my_select_function(ui.item);
        }
    }
}).keypress(function(e) {
    if (e.keyCode == 13) {
        if ( ! didSelect ) {
            my_search_function( $("#search").val() );
        }
    }
});

});

InformationsquelleAutor richardsun

1

Verwenden der UI-Autocomplete-plugin der version 1.8.5:

Look für dieses bisschen code

"Fall d....GEBEN Sie ein:Fall d....NUMPAD_ENTER:ein.Menü.element.is(":visible")&&c.preventDefault();"

und entfernen oder kommentieren Sie es aus.

Im wesentlichen dem, was oben gesagt wurde, aber von der aktuellen version des plugins.

cheers

Pete

InformationsquelleAutor Peter Tizzard

Dies ist, was ich getan habe

<div class="ui-widget"> 
    <form action="javascript:alert('hey run some javascript code')">
        <input id="search"  />
    </form>
</div>

InformationsquelleAutor gman

AutoVervollständigen supresses Einreichen, aber das war als workaround für mich:

jQuery.fn.go_url = function(id) {
    var url="gl10.pl?ar=2010&listi=ts&niv=stovnsnr&rl=1290693052914&stovnsnr=replaceme";
    var ok;
    if (ok=id.match(/^\d{6}$/)) {
        url=url.replace(/replaceme/g,id);
        location=url;
    }
}
jQuery(function() {
    jQuery( "#stovnar" ).autocomplete({
        source: "autocomplete.pl?pname=stovnsnr",
        minLength: 3,
        select: function( event, ui ) { if (ui.item) { jQuery.fn.go_url(ui.item.id); } }
    });
}).keypress(function(e) {
    if (e.keyCode === 13) {
        v=jQuery("#stovnar").val();
        jQuery.fn.go_url(v)
    }
});

InformationsquelleAutor Eyjólfur Gislason

0

Ich hatte das gleiche problem, und dachte sich mit der Validierung, um dies zu erreichen, aber am Ende meine Lösung sieht viel leichter als andere Lösungen auf diese Seite:
1. Machen ein Eingabefeld geben Sie den text ein, benannt #input und ein hidden input namens #hiddeninput. Ihre Suche-backend haben, um den Wert für #hiddeninput.
2. Innerhalb Ihrer autocomplete, setzen Sie den Wert von #hiddeninput zu verlangen.Begriff: (ich habe diese im inneren $.ajax({ success: }) )
$("input#hiddeninput").val(request.Begriff);
1. Legen Sie die AutoVervollständigen-mit der select -:-Methode zum füllen der versteckte Eingang mit dem Vorschlag, dass gewählt wird:
```
select: function( event, ui ) {
  $("input#input").val(ui.item.label),
  $("input#hiddeninput").val(ui.item.nr),
  //Auto-submit upon selection
  $(this).closest("form").submit();
}
```
Nun wird die Suche durchgeführt werden, was der Anwender eingegeben hat, bis er wählt etwas aus der Vorschläge-Liste.

InformationsquelleAutor zenlord

<script>
    $(function() {
        $('#student').autocomplete({
            source: '../ajx/student_list.php',
            minLength: 3,
            response: function( event, ui ) {
                $('#student_id').val(ui.content[0].id);
            },
            select: function( event, ui ) {
                $('#student_id').val(ui.item.id);
                $(this).closest('form').trigger('submit');
            }
        }).keypress(function(e) {
            if (e.keyCode === 13) {
                $(this).closest('form').trigger('submit');
            }
        });
    });
</script>
<div>
    <form action='../app/student_view.php'>
        <input name='student_id' id='student_id' type='hidden' value=''>
        <label for='student'>Student: </label>
        <input id='student' />
    </form>
</div>

Hier habe ich autocomplete Suche für einen Schüler. Wenn der Benutzer die EINGABETASTE gedrückt, wird die form vorlegen würden, auch wenn nichts ausgewählt wurde, aus der Liste. Das 'response' - Ereignis aktualisiert werden würde, den Wert eines hidden input-Feld mit dem ersten Eintrag in der Liste. Sie können auch auf oder wählen Sie aus der Liste.

InformationsquelleAutor brainzone

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.