_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();
}
});
});
