Comportamento dell'interfaccia utente jQuery UI. Come cercare testo libero su invio?

Question

prima domanda (e si spera, ma dubbiosamente la mia unica)

Sto usando il completamento automatico dell'interfaccia utente jQuery. Ecco un codice di esempio per replicare il mio problema.

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

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

Quando un utente digita 'J' che sarà presentato con 'Clojure' e 'JavaScript' come suggerimenti.

Ho omesso Java da questo elenco, se l'utente desidera cercare Java, digita "Java", premere il tasto Invio ma il modulo non viene inviato. Se aggiungi uno spazio, il suggerimento "JavaScript" scompare e il modulo può essere inviato premendo il tasto Invio.

Sto creando una ricerca gratuita, voglio che gli utenti possano cercare premendo enter anche se ci sono suggerimenti disponibili.

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

Ho provato il pensiero sopra ho potuto rilevare manualmente una pressione del tasto presentare e inviare il modulo, ma l'allarme mostra tutte le chiavi vengono rilevati TRANNE presentare che sembra essere soppressa dal completamento automatico.

Qualsiasi aiuto è molto apprezzato! Grazie.

Answer 1

UPDATE

ho dovuto fare alcuni cambiamenti, ma questo codice funziona bene dalla mia parte dopo averlo fatto. Innanzitutto, e.keycode dovrebbe essere e.keyCode. Non pensavo che il caso fosse importante, ma lo è. Inoltre, assicurati di non quotare il 13 quando controlli che il keyCode sia il pulsante di invio. Non funzionerà correttamente se lo fai. Ecco il nuovo codice:

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"]; 
$("#autocomplete").autocomplete({ 
    source: suggestions 
}).keypress(function(e) { 
    if (e.keyCode === 13) { 
     $(this).closest('form').trigger('submit'); 
    } 
}); 

---

La funzione pressione del tasto dovrebbe essere simile di seguito, e anche, è possibile concatenare il completamento automatico e le funzioni di pressione dei tasti per rendere più facile su di voi. Sotto il codice dovrebbe funzionare.

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"]; 
$("#autocomplete").autocomplete({ 
    source: suggestions 
}).keypress(function(e) { 
    if (e.keycode === 13) { 
     $(this).closest('form').trigger('submit'); 
    } 
}); 

Answer 2

sopprime i Autocomplete presentare, ma questo ha lavorato come una soluzione per me:

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) 
    } 
}); 

Answer 3

Utilizzando l'interfaccia utente completamento automatico plug-in versione 1.8.5:

Cercare questo pezzo di codice

"case d.ENTER: case d.NUMPAD_ENTER: a.menu.element.is (": visible ") & & c.preventDefault();"

e rimuoverlo o commentarlo.

In sostanza, ciò che è stato detto in precedenza, ma dalla versione corrente del plug-in.

applausi

Pete

Answer 4

Questo è quello che ho fatto

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

Answer 5

Ho avuto lo stesso problema, e stava pensando di utilizzare la convalida per raggiungere questo obiettivo, ma alla fine la mia soluzione sembra un molto più facile di altre soluzioni in questa pagina:

1. Effettuare un input fi aprire il testo, denominato #input e un input nascosto denominato #hiddeninput. Il tuo backend di ricerca dovrà utilizzare il valore per #hiddeninput.

2. All'interno del vostro completamento automatico, impostare il valore di #hiddeninput a request.term: (ho impostato questo all'interno $.ajax({ success: }))

$ ("# ingresso hiddeninput") val (request.term.);

1. Impostare il completamento automatico con il prescelto: -Metodo per riempire l'ingresso nascosto con il suggerimento che viene scelto:

select: function(event, ui) { 
    $("input#input").val(ui.item.label), 
    $("input#hiddeninput").val(ui.item.nr), 
    //Auto-submit upon selection 
    $(this).closest("form").submit(); 
} 

Ora la ricerca verrà eseguita su ciò che l'utente ha digitato fino a quando non seleziona qualcosa dalla lista dei suggerimenti.

Answer 6

Ho avuto un problema simile, il widget di completamento automatico jquery-ui attiva l'evento select quando l'utente seleziona un suggerimento dall'elenco, sia che il suggerimento selezionato sia stato cliccato o che sia stato premuto il tasto invio. Ma non ha fatto nulla se l'utente ha digitato il testo e premuto il tasto di immissione senza selezionando un elemento dall'elenco. Quando ciò accade, ho bisogno di fare una ricerca.

È stato facile aggiungere un gestore di eventi keypress, ma è stato attivato se una selezione era stata effettuata o meno. Così ho aggiunto una variabile, didSelect, per mantenere lo stato di selezione.

Ecco la soluzione completa:

$(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()); 
     } 
    } 
}); 

});

Answer 7

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

Qui ho usato completamento automatico per la ricerca di uno studente. Se l'utente ha premuto INVIO, il modulo dovrebbe inviare, anche se non è stato selezionato nulla dall'elenco. L'evento 'response' aggiornerebbe il valore di un campo di input nascosto con il primo elemento nell'elenco. Potrebbero anche fare clic o selezionare dall'elenco.