szybke autocomplete dla jQuery

Potrzebowałem na szybko jednej prostej rzeczy: odpytać się serwer o listę (ajax/json), ustawić wartość input’a na pierwszą wartość z listy i utworzyć mały dropdown, z ktorego można ewentualnie wybrać ktoryś z pozostałych elementów.

Chciałem użyć czegoś gotowego, tak by nie musieć wymyślać co i jak. Zacząłem szukać dostępnych rozwiązań i prawie wszystkie miały po kilkanaście kB kodu, dość dużo zależności i strasznie brzydki CSS.

Najprostsze rozwiązanie, to użyć autocomplete z jQuery UI, ale by to zadziałało, muszę zaimportować pół jQuery UI i jeszcze więcej CSSów. Przy czym nie używam w tym projekcie ani kawałka CSSu z jQuery UI, więc rozwiązanie to to overkill – prawie 90kB kodu dla małego dropdowna.

Szukałem dalej, i wszystkie rozwiązania miały podobne wady – bardzo dużo javascriptu – niekiedy kod naprawdę złej jakości, a CSSy jeszcze gorsze – no ale czego się spodziewać po czymś darmowym… Nie to że komercyjne rozwiązania są jakieś super lepsze, ale przynajmniej można powymagać.

Poddałem się, zrobiłem to samemu. Parę linijek kodu javascript i kilka w HTML.

▼

Czyli bardzo prosto – jest sobie input, za nim jest anchor (a) a następnie kontener div, gdzie będą wyświetlone wyniki. To ▼ to trójkąt „w dół” – by nie uzywać obrazków.

Do tego oczywiście prosty CSS, głównie po to by ta lista wyglądałam najważniejsze to pozycjonowanie i overflow div.

#handle, #handle:hover {
  text-decoration: none;
}
#handle:hover {
  background-color: #ddd;
}
#dropdown-list {
  position: relative;
  height: 150px;
  width: 218px;
  overflow-y: auto;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
}
#dropdown-list a {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border-bottom: 1px solid #ddd;
  text-decoration: none;
  color: #808080;
}
#dropdown-list a:hover {
  background-color: #aaa;
}

i na koniec javascript:

// obsługa pokazywania i chowania listy
$('#handle').click(function(){
  $('#server-addresses').toggle();
  return false;
});

// uzupełnianie listy i obsługa wypełniania pola
// wywoływana z handlera ajax .success 
  if(data.address_list.length >= 1) {
    // ustawienie pierwszej wartości
    $('#id_address').val(data.address_list[0]);
    // pokaż trójkąt 
    $('#server-addresses-handle').show();
    // opróżnij listę
    $('#dropdown-list').empty();
    // uzupełnia listę o elementy "a" z podpiętym eventem 'click'
    $(data.address_list).each(function(idx,el){
       $('#server-addresses').append(
           $('')
             .text(el)
             .click(function() {
                $('#id_address').val($(this).text());
                $('#server-addresses').toggle();
                return false;
              }));
  }