2010-12-18 9 views
7

Interfejs autouzupełniania jQuery - Chciałbym rozpocząć wyszukiwanie "onfocus" i natychmiast pokazać listę opcji, gdy zakładki użytkownika lub klika w pole wyszukiwania bez konieczności wpisywania czegokolwiek przez użytkownika.Interfejs autouzupełniania jQuery - Chciałbym rozpocząć wyszukiwanie bez konieczności wpisywania czegokolwiek przez użytkownika.

Wygląda na to, że domyślne zachowanie wymaga podania przez użytkownika znaku lub strzałki w dół, aby rozpocząć walkę i rozpocząć wyszukiwanie, a także uzyskać wartości, nawet jeśli ustawię liczbę znaków wymaganą do wyzerowania.

 

$("#contact").autocomplete({ 
    source: 'remote.php', 
    minLength: 0 
}); 

dziękuję!

Odpowiedz

3
$("#contact").focus(function() { 
    if ($(this).val().length == 0) { 
     $(this).autocomplete("search"); 
    } 
}); 

Upewnij się, że autouzupełnianie na minLength 0.

+0

czy to jest dodatek do tego, co zakodowałem, czy zamiast tego? dzięki! – sdfor

+0

@sdfor dodatkowo – Emmett

+1

działa teraz nieco dziwnie. Menu rozwijane wymaga zaznaczenia wyboru za pomocą strzałki w dół lub dwukrotnego kliknięcia. Jedno kliknięcie powoduje wybór w polu, ale nie pozostaje, gdy poruszasz myszą. Firefox lub IE – sdfor

13

Nieco bardziej skomplikowany niż odpowiedź Emmetta, ale ...

  • wyskakuje lista na ostrość nawet wtedy, gdy okno już zawiera tekst
  • Unika ponownego pojawienia się listy po kliknięciu elementu

Ją e jest on:

var closing = false; 

$('#contact').autocomplete({ 
    source: 'remote.php', 
    minLength: 0, 
    close: function() 
    { 
     // avoid double-pop-up issue 
     closing = true; 
     setTimeout(function() { closing = false; }, 300); 
    } 
}) 
.focus(function() { 
    if (!closing) 
     $(this).autocomplete("search"); 
}); 
+0

Możesz to zrobić po prostu używając parametrów minLength i ostrości w autouzupełnianiu, bez żadnego dalszego kodowania. Zobacz rozwiązanie przez androidmj. – HoldOffHunger

3

to rozwiązanie nie działa dla mnie, ale to:

$('#contact').autocomplete({ 
source: 'remote.php', 
minLength: 0 
      }).focus(function(){ 
if (this.value == "") 
$(this).trigger('keydown.autocomplete'); 
}); 

działa dobrze (źródło: jquery forum)

4

This solution nie dokładnie pracować dla mnie, bo w autouzupełniania pole wyników pojawi się ponownie po wybraniu pożądanego wyniku. Wynikało to z tego, że metoda .focus została wykonana przed zdarzeniem close:.

Dodatkowo, w zależności od kodu w that answer, gdy okno zamknięte, to nie otworzyć z powrotem, ponieważ zmienna closing przebywał true powodu close: wykonywane po .focus.

Poniższy kod rozwiązać te dwie kwestie (uwaga zmienna closing jest ustawiona na false w przypadku close:):

var closing = false; 

$(function() {$(".autocomplete").autocomplete({ 
    source: 'remote.php', 
    minLength: 0, 
    open: function(){ 
     closing=true; }, 
    close: function(){ 
     closing = false; 
     } 
}) 
    .focus(function(){ 
     if ((!closing) && ($(this).val() !== "")){ 
      $(this).autocomplete("search"); 
     } 
    }); 
}) 
5

Okazało się, że kod ten był trochę czystsze i elementem specyficzny.

$(<selector>).autocomplete({ 
      minLength: 0, 
      delay: 500, 
      source: funcDataLookUp, 
      open: function() { $(this).attr('state', 'open'); }, 
      close: function() { $(this).attr('state', 'closed'); } 
     }).focus(function() { 
      if ($(this).attr('state') != 'open') { 
       $(this).autocomplete("search"); 
      } 
     }); 
3

Spróbuj połączyć focus z autouzupełnianiem.

$("#contact").autocomplete({ 
     source: 'remote.php', 
     minLength: 0 
    }).bind('focus', function() { 
     $(this).autocomplete("search"); 
    }); 

Sprawdź moją próbkę JSFiddle.

2

JQUERY faktycznie Sugeruje to metoda

http://api.jqueryui.com/autocomplete/#method-search

$('.yourclass').autocomplete({ 
    minLength: 0 
    ,source:['blah','andblahagain'] 
    ,focus: function() { 
    $(this).autocomplete("search", ""); 
    }, 
}); 

zasadzie użyć MINLENGTH: 0 i zdarzenie ogniskowej o poszukiwaniu "".

+0

Rozwiązanie wykorzystujące tylko parametry autouzupełniania JQuery. Dokładne rozwiązanie, którego wszyscy powinni szukać. – HoldOffHunger

Powiązane problemy