[jqueryui][autocomplete] Zablokowanie wysyłania formularza Opcje

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

[PHP] pobierz, plaintext 
	public function display() {
		$return = form::input($this->get_name(), $this->get_value(), form::attributes($this->get_attributes()));
 
		$return .= '
		<script type="text/javascript">
		$(document).ready(function() {
			$("#'.$this->get_attribute('id').'").autocomplete(
				'.$this->render_options().'
			);
 
			$("#'.$this->get_attribute('id').'").keydown(function(e) {
				var key = e.charCode || e.keyCode || 0;
 
				if (key == 13) {
					alert("Sraka");
 
					// (IMG:style_emoticons/default/questionmark.gif) ?
				}
			});
		});
		</script>
		';
 
		return $return;
	}
[PHP] pobierz, plaintext 

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

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

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:

[PHP] pobierz, plaintext 
	public function display() {
		$return = form::input($this->get_name(), $this->get_value(), form::attributes($this->get_attributes()));
 
		$return .= '
		<script type="text/javascript">
		$(document).ready(function() {
			$("#'.$this->get_attribute('id').'").autocomplete(
				'.$this->render_options().'
			);
 
			$("#'.$this->get_attribute('id').'").keydown(function(e) {
				var key = e.charCode || e.keyCode || 0;
 
				if (key == 13) {
					var stop = function(e) {
						e.preventDefault();
					};
 
					$("#'.$this->get_form()->get_attribute('id').'").bind("submit", stop);
 
					setTimeout(function() {
						$("#'.$this->get_form()->get_attribute('id').'").unbind("submit", stop);
					}, 0.1 * 1000);
				}
			});
		});
		</script>
		';
 
		return $return;
	}
[PHP] pobierz, plaintext 

Ten post edytował phpion 4.09.2010, 13:16:23

[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