Displaying dynamic search results dropdown

Question

I'mn using selectize to load dynamic search results using an ASP.Net webservice, and no problems with that. However, in order to display the dropdown of results I have to lose and regain focus from the selectize control (which deletes the text), or delete what I have typed.

How to display the results dropdown when I type? This is code I am using

$('#input-tags3').selectize(
{
valueField : 'id',
labelField : 'name',
searchfield : 'name',
plugins : ['remove_button'],
options : [],
delimiter : ',',
highlight : true,
persist : true,
hideselected : true,
create : false,
load : function (query, callback)
{
    if (!query.length || query.length < 3)
        return callback();
    $.ajax(
    {
        url : '../data/WebService1.asmx/GetLookup',
        data : "pSearchType=CAC&pQuery=" + query,
        type : 'GET',
        error : function ()
        {
            callback();
        },
        success : function (res)
        {
            callback(res);
        }
    }
    );
}
score : function (search)
{
    var score = this.getScoreFunction(search);
    return function (item)
    {
        return score(item) * (1 + Math.min(item.watchers / 100, 1));
    };
},
render :
{
    item : function (item, escape)
    {

        return '<div>'
         + '<b>' + item.id + '</b><p>' + item.name + '</p></div>'

    },
    option : function (item, escape)
    {

        return '<div>'
         + '<b>' + item.id + '</b><p>' + item.name + '</p></div>'

    }
}
});

Also, the above code appends any dynamic results to the dropdown, and doesn't clear it as expected.

Answer 1

You need to add onChange event to your input, like in this question: selectize.js : to clear selected value in onChange event