torsdag 31 juli 2014

Simpel autocomplete funktionalitet - jQuery

Tänkte visa hur jag gjort en simpel variant av autocomplete som man kan använda där man vill kunna välja bland ett antal förutbestämda värden.

_searchTextBoxControlId = ID på textfältet där användaren ska skriva sitt sökord.
_tagAutoCompleteListId = ID på den DIV-tagg som agerar "behållare" för alla värden som användaren kan välja bland. CSS på denna bör vara "display:none" initialt.
showMessage() är en valfri metod där man kan skriva ut info till användaren, t.ex. i en informationsruta.

Kod att köra vid sidladdning:
 var initTagAutoComplete = function() {  
 $.ajax({  
  type: 'POST',  
  url: '/your/url/to/fetch/arrayofstrings',  
  dataType: 'json',  
  beforeSend: function (jqXhr, settings) {  
      showMessage('Initilizing autocomplete...');  
  },  
  success: function (data, textStatus, jqXhr) {  
      //data should be expected to be returned as ['astring', 'anotherstring', 'yetanotherstring', ...]  
      $(_tagAutoCompleteListId).empty();  
      $.each(data, function(idx) {  
       $(_tagAutoCompleteListId).append('<div class="autocomplete-item"><a data-autocomplete="' + idx + '" href="#" onclick="event.preventDefault;$(\'' + _searchTextBoxControlId + '\').val(\'' + data[idx] + '\');$(\'' + _tagAutoCompleteListId + '\').fadeOut(\'slow\')">' + data[idx] + '</a></div>');  
      });  
      showMessage('');  
  },  
  error: function (jqXhr, textStatus, errorThrown) {  
      showMessage('Technical error!');  
  }  
 });  

Kod som knyts till texfältet för sökning:
 $(_searchTextBoxControlId).keyup(function (event) {  
  var searchWord = $(_searchTextBoxControlId).val();  
  $(_tagAutoCompleteListId).fadeIn('slow');  
  $('a[data-autocomplete]').each(function (idx) {  
      $('a[data-autocomplete="' + idx + '"]').parent().hide();  
      var tagValue = $('a[data-autocomplete="' + idx + '"]').text();  
      if (tagValue.toLowerCase().indexOf(searchWord.toLowerCase()) == 0) {  
       $('a[data-autocomplete="' + idx + '"]').parent().show();  
      }  
  });  
 });  

Inga kommentarer:

Skicka en kommentar