2

I need to add another element in the result list of auto complete. This element should not be clickable and should act as an info in the search list.

I am trying the below code and using the appendTo option but it doesn't seem to work 

var acOptions = {
    source: userNames,
    minLength: 1,
    appendTo: "<li class='ui-menu-item' role='menuitem'>Search by username </li>"
};

$('input.userName').autocomplete(acOptions);

Can someone guide me here?

Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
Vidya
  • 7,717
  • 12
  • 48
  • 75

1 Answers1

4

Is this http://jqueryui.com/demos/autocomplete/#categories is what you're looking for ? Here is a working demo http://jsfiddle.net/pomeh/XJ47e/.

HTML code

<div class="demo">
    <label for="search">Search: </label>
    <input id="search" />
</div>

<p>A categorized search result. Try typing "a" or "n".</p>

​

Javascript code

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
        var self = this,
            currentCategory = "";
        $.each(items, function(index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItem(ul, item);
        });
    }
});


var data = [
    { label: "anders", category: ""},
    { label: "andreas", category: ""},
    { label: "antal", category: ""},
    { label: "annhhx10", category: "Products"},
    { label: "annk K12", category: "Products"},
    { label: "annttop C13", category: "Products"},
    { label: "anders andersson", category: "People"},
    { label: "andreas andersson", category: "People"},
    { label: "andreas johnson", category: "People"}
];

$("#search").catcomplete({
    delay: 0,
    source: data
});

CSS code

.ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
}​
pomeh
  • 4,742
  • 4
  • 23
  • 44
  • thanks for the answer . This works only if i enter some keyword and there should be a matching word from that alphabet . I was looking for even if the keyword doesn't match any of the search parameters still it should show up as kind of help tab – Vidya Apr 23 '12 at 10:55
  • you have to edit the `_renderMenu` above. Currently it traverse all matching words, so you just have to edit it to traverse all words then displaying relevant caterogies :) – pomeh Apr 23 '12 at 11:00
  • yeah but i dont want it to be a category. It should come event if there is no match to any word . It like sort of help tab. – Vidya Apr 23 '12 at 11:40