Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jqueryui][autocomplete] Zablokowanie wysyłania formularza
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
phpion
Witam,
kombinuję i nie mam pojęcia co zrobić. Wewnątrz formularza używam autocomplete z jQuery UI i chciałbym by w momencie wyboru elementu z listy i po naciśnięciu klawisza [ENTER] formularz nie był wysyłany. Po prostu chciałbym by wybrana wartość wskoczyła w pole i tyle.

Kombinowałem z przechwyceniem klawisza [ENTER] na polu (wychwytuje), ale nie wiem co zrobić dalej. e.preventDefault() nie zadziałało, return false też nie.

Oto mój kod:
  1. public function display() {
  2. $return = form::input($this->get_name(), $this->get_value(), form::attributes($this->get_attributes()));
  3.  
  4. $return .= '
  5. <script type="text/javascript">
  6. $(document).ready(function() {
  7. $("#'.$this->get_attribute('id').'").autocomplete(
  8. '.$this->render_options().'
  9. );
  10.  
  11. $("#'.$this->get_attribute('id').'").keydown(function(e) {
  12. var key = e.charCode || e.keyCode || 0;
  13.  
  14. if (key == 13) {
  15. alert("Sraka");
  16.  
  17. // questionmark.gif?
  18. }
  19. });
  20. });
  21. </script>
  22. ';
  23.  
  24. return $return;
  25. }


PS: komunikat "Sraka" się pojawia w momencie wciśnięcia [ENTER] na liście podpowiedzi.

// Edit:
Widzę, że jednak jest to bug autocomplete :/

Cytat
The list of suggestions
[...]
a Enter keypress will select the selected item (preventing the default form submit) or do nothing special when there is no selected item (allow the default form submit)

http://wiki.jqueryui.com/Autocomplete

Wie ktoś co z tym fantem zrobić?

// Edit: (w miarę rozwiązane)
Rozwiązałem to w ten sposób, może komuś się przyda lub ktoś poda lepsze rozwiązanie:
  1. public function display() {
  2. $return = form::input($this->get_name(), $this->get_value(), form::attributes($this->get_attributes()));
  3.  
  4. $return .= '
  5. <script type="text/javascript">
  6. $(document).ready(function() {
  7. $("#'.$this->get_attribute('id').'").autocomplete(
  8. '.$this->render_options().'
  9. );
  10.  
  11. $("#'.$this->get_attribute('id').'").keydown(function(e) {
  12. var key = e.charCode || e.keyCode || 0;
  13.  
  14. if (key == 13) {
  15. var stop = function(e) {
  16. e.preventDefault();
  17. };
  18.  
  19. $("#'.$this->get_form()->get_attribute('id').'").bind("submit", stop);
  20.  
  21. setTimeout(function() {
  22. $("#'.$this->get_form()->get_attribute('id').'").unbind("submit", stop);
  23. }, 0.1 * 1000);
  24. }
  25. });
  26. });
  27. </script>
  28. ';
  29.  
  30. return $return;
  31. }
pitbull82
Dzięki, przydało się. Dzięki temu formularz nie jest wysyłany, ale chciałem osiągnąć jeszcze jedno - że nawet jeśli myszką nie najadę na którąś z opcji i nacisnę enter zostanie wybrana ta właściwa (kod z pierwszego postu tego nie rozwiązuje).

Skorzystałem z https://github.com/scottgonzalez/jquery-ui-....selectFirst.js

W kodzie wystarczyło dodać selectFirst: true na zasadzie jak poniżej:

Kod
      $( "#city" ).autocomplete({
         source: "tusciezkaphp",
         minLength: 2,
         delay: 0,
        
         selectFirst: true        

      });


Zmieniając tak, akurat w moim przypadku jeśli ktoś wybiera miasto, a takie już istnieje, jeśli wpisze np. War a miasta w bazie to Warszawa i Warta i kliknie enter, zostanie wybrana pierwsza opcja.

Idąc dalej, chciałem osiągnąć aby użytkownicy przez pomyłkę nie wybierali złego miasta przez wciśnięcie enter - tak jak powyżej wybierze jedno z tych miast, chociaż użytkownik może mieszkać w tym drugim, więc chciałem ograniczyć autouzupełnienie pola poprzez enter tylko do przypadku, gdy na liście jest już tylko jeden element - czyli przykładowo ktoś wpisze Wars na liście jest tylko Warszawa, to nie będzie musiał ani klikać ani wpisywać do końca tylko wciśnie enter - osiągnąłem to dokonując małej modyfikacji w JS do którego link dałem.

Linię:

Kod
menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first() );


zamieniłem na

Kod
   if( menu.element.children().length==1) {  
       menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first() );
   }


i wygląda na to, że pięknie działa. Mam nadzieję że komuś się przyda
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.