Set Autocomplete Value programatically

[luesakParticipant]

Hi,

I have an autocomplete input that gets data from a backend DB. The data is a id, value pair. Let’s say I have a form that has this autocomplete input… I need to default the input to a given value when the user clicks Add.

I have set the input using $(“#inputid”).val(‘Default’);

However, this Default is not queried back and the corresponding ID is not retrieved…. how can I force a query of the autocomplete after I set it’s displaymember?

Thanks

Kim

[Peter StoevKeymaster]

Hi Kim,

The “val” method sets the HTML Input’s Text. You can call “suggest” to perform a new query to your DB. That is the function called while you type into the input field and which depends on the Input’s value.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[luesakParticipant]

Thanks. I don’t see suggest anywhere in the docs… I guess it’s $(“#id”).jqxInput(“suggest”);
is that correct?

[Peter StoevKeymaster]

Hi Kim,

It is not in the docs, because it is internal API. You can can call it in the same way as you call any method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[luesakParticipant]

Peter,

Calling suggest just seems to open up the popup…. without closing it… is there another internal API that I can send the query back to get the id from the DB without opening the popup?

Thanks

Kim

[Peter StoevKeymaster]

Hi Kim,

You can query your DB whenever you wish and not through the jqxInput’s API. For example, if you use jqxDataAdapter, you can simply call its dataBind method and a new query would be executed.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[luesakParticipant]

OK… that might work.. problem is.. how do I get a reference to the jqxDataAdapter from the autocomplete… here’s how I’m setting the data source for the input

$(“#inputBox”).jqxInput({displayMember: sDisplayMember, valueMember: sValueMember,
source: function (query, response)
{
var dataAdapter = new $.jqx.dataAdapter
…..

As you can see this is like the demo example. the dataAdapter is inside the source function… how can I get a hold of that so I can call the dataBind function… or is there a different way to set the source?

Kim

[Peter StoevKeymaster]

Hi Kim,

That is how it is defined in the sample, because it is not necessary for the sample’s purpose to use jqxDataAdapter instance outside the source function. In your case, you can define it outside and just update it in the source function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[luesakParticipant]

Peter,

Thanks so far… I’ve been trying to crack this nut… but it’s not working… here’s the problem…
.jqxInput({displayMember: sDisplayMember, valueMember: sValueMember, source: function (query, response)

The source function takes 2 params. I understand the query is the text in the input box, the response seems to be some kind of function that is related to opening the list of suggested matches…

The loadComplete funciton of the settings of the dataAdapter uses this reponse param… as follows:
loadComplete: function (data)
{
if (data.length > 0)
{
response($.map(data, function (item)
{
return {label: item[sDisplayMember], value: item[sValueMember]};
}));
}
}

If I defined the datadapter outside as you mentioned… how would I get this response parameter?

A code sample would really help!

Thanks

Kim

[Author]

Posts