Avoir des sections utilisant la saisie semi-automatique Jquery UI

Question

J'utilise http://jqueryui.com/demos/autocomplete/.

Je suis en train de faire quelque chose comme la dernière fm fait avec leur autocomplete où il y a un en-tête avec des résultats pour cette sous, puis un autre, etc. http://www.last.fm

En utilisant les données personnalisées exemple, je ne suis pas sûr comment le faire correctement. Quelqu'un at-il des suggestions ou des pointeurs?

<script type="text/javascript"> 
$(function() { 
    $("#findUserIdDisplay").autocomplete({ 
     source: "ui_autocomplete_users_withuname.php", 
     minLength: 2, 
     select: function(event, ui) { 
      $('#findUserId').val(ui.item.id); 
     }.data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>"+ item.label + "</a>") // + + "<br>" + item.desc + "</a>" 
      .appendTo(ul); 
    }; 

Answer 1

je configurer un usage similaire qui a nécessité deux phases ... La première était d'ajouter les en-têtes, j'ai créé de nouveaux éléments de menu, mais a changé la valeur de « label », alors j'étendu la renderItem pour autocomplete en utilisant ce code:

$.ui.autocomplete.prototype._renderItem = function (ul, item) { 
    var startElem = null; 

    if(item.value == 'label') { 
     startElem = $('<li></li>').addClass('categoryLabel') 
      .data('item.autocomplete', item) 
      .append('<a style="display:none;"></a>') 
      .append(item.label) 
      .appendTo(ul); 
    } else { 
     startElem = $('<li></li>').data('item.autocomplete', item) 
      .append('<a>' + item.label + '</a>') 
      .appendTo(ul); 
    } 
    return startElem; 
}; 

J'ai aussi ajouté à l'événement pour faire en sorte que « sélectionner » si quelqu'un clique sur un en-tête de l'étiquette, il ne redirige pas

select: function(event, ui) { 
    event.preventDefault(); 

    if (ui.item.value != 'label') { 
     return; 
    } 
} 

je configurer le style CSS pour « categoryLabel » pour le dénommer autrement que les autres éléments

Answer 2

Jetez un oeil à JQuery Autocomplete exemple Catégories. Dans cet exemple, l'astuce consiste à remplacer _renderMenu du widget de saisie semi-automatique dans un widget personnalisé qui hérite de la saisie semi-automatique.

http://jqueryui.com/autocomplete/#categories

violon échantillon JS http://jsfiddle.net/ud3sh/v2Agq/4/

var data = [ 
    { label: "America", category: "" }, 
    { label: "Angola", category: "" }, 
    { label: "Andora", category: "" }, 
    { label: "Amtrak", category: "Companies" }, 
    { label: "Amazon", category: "Companies" }, 
    { label: "American Airlines", category: "Companies" }, 
    { label: "Amber L", category: "People" }, 
    { label: "Amy Quatro", category: "People" },    
    { label: "Andrée González", category: "People" } 
]; 

//widget extension 
$.widget("custom.catautocomplete", $.ui.autocomplete, { 
    //NOTE: this will process the items in order, so a category could show up multiple times 
    _renderMenu: function (ul, items) { 
     var that = this; 
     var currentCategory = ""; 
     $.each(items, function (index, item) { 
      if (item.category != currentCategory) { 
       ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
       currentCategory = item.category; 
      } 
      that._renderItemData(ul, item); 
     }); 
    } 
}); 

$("#search").catautocomplete({ 
    source: function (request, response) { 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     response($.grep(data, function (value) { 
      return matcher.test(value.label) || matcher.test(normalize(value.label)); 
     })); 
    } 
}); 

//utilities for accent mapping 
var accentMap = { 
    "á": "a","ö": "o","é" : "e" 
}; 
var normalize = function (term) { 
    var ret = ""; 
    for (var i = 0; i < term.length; i++) { 
     ret += accentMap[term.charAt(i)] || term.charAt(i); 
    } 
    return ret; 
};