Question

I’m using the jquery autocomplete plugin and I am comming up to a few problems:
I have a lot of data and when I type data a long suggestion list is shown and a scrollbar is needed:

$("#txtName").autocomplete(data,
                                  { matchContains: true,
                                      minChars: 0,
                                      max: 3000,
                                      scroll: true,
                                      //scrollHeight: 180,
                                      width: 200
                                  });

but, the scrollbar does’t work properly in IE (it’s a known issue, I searched alot but have’nt found a relevant solution).

so I decided to block the suggestion list popup and get the suggestion list results into an array or somthing similar and show them in my control.
my problem is – How do I get that list?

Thanks in advance!

Answer 1

I found the answer (part of it, I still need to work on it).
I’ll first post the code and then explain it:

$(function ()
{
    var names = [
        { label: 'Java', value: '1' },
        { label: 'C++', value: '2' },
        { label: 'C#', value: '3' },
        { label: 'Jquery', value: '4' },
        { label: 'Javascript', value: '5' },
        { label: 'ASP', value: '6' },
        { label: 'Pearl', value: '7' },
        { label: 'VB', value: '8' },
        { label: 'Ajax', value: '9' },
        { label: 'Json', value: '10' }];

    $("#txtName").autocomplete({
        minLength: 2,
        source: names,
        delay: 500
    }).data("autocomplete")._renderItem = function (ul, item)
    {
        //add data to my control, need to take care of earasing each time.
        var elOptNew = document.createElement('option');
        elOptNew.text = item.label;
        elOptNew.value = item.value;
        lst.add(elOptNew);

        //this code here adds the items to the popup thats built in.(it's written in jquery-ui.min.js)
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
    };
});

Html:

    <input id="txtName"/> 
    <select id="lst" size='10'></select>

The added part (_renderItem) adds one item each time, so you can do whatever you want to do with an item. I decided to add it to a list.

The other thing that’s not done is erasing the list each time. I still need to figure out how to do that.