On Demand Auto Complete using jqxInput

[Moizuddin KhajaParticipant]

Hi Team,
We have a requirement where we are supposed to fetch and bind data based on input given in the jqxInput(Auto Complete extender).
We have tried using OnKeyDown event but have few issues(specially ‘delete’ & backspace keydown events).
Can we have something like keyup or any other better solution in Angular 2.

Problem :
We have a jqxInput control.
HTML Code :
<angularInput #txtAccountNumber class=”accountInput” (OnKeyDown)=”fetchAccountNumber($event)”></angularInput>

Type Code :
@ViewChild(‘txtAccountNumber’) txtAccountNumber: jqxInputComponent;

Initially we are binding it with empty source.

settings: jqwidgets.InputOptions =
{
height: 25,
width: 200,
minLength: 1,
source: ”
}

ngAfterViewInit(): void
{
this.txtAccountNumber.createWidget(this.settings);
}

—-
We are passing the input as query string parameter (‘inputString’) to a web api controller using below url and binding the response to the jqxInput source.

dataUrl = http://localhost/controllerName/MasterData?inputFiledName={0}&inputString={1}

Our Present solution :
OnKeyDown we are calling this method by with dataIUrl (getDataFromService() method is used to call _http.get() method).

fetchAccountNumbers():void {
this._httpService.getDataFromService(dataUrl, false)
.toPromise().then(response => {
this.txtAccountNumber.source(response.json());
});
}

For backspace we have figured out solution to remove the last character of the whole text .
Example ‘1234’ on backspace will give us 123.
But for delete keydown we need to find the caret position and delete the respective character from the text. This is a overhead for such a small operation.

Do we have any of these solution :
1)OnKeyUp event – OnKeyUp we will fetch and rebind source of jqxInput
2)Refresh/Reload methods – To rebind the jqxInput source.
3) Any better solution.

[Peter StoevKeymaster]

Hi Moizuddin Khaja,

The jqxInput’s auto-complete works by providing a data source to the source property i.e you will need to set the source property of the widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Moizuddin KhajaParticipant]

Hi Stoev,
Could you please elaborate your reply as I have already binding source property of jqxInput in method(fetchAccountNumbers()) . Also how can I achieve dynamically binding data source to source property of jqxInput onkeyup . Will be helpfull if you could provide us a sample.

[Moizuddin KhajaParticipant]

Let me put it in this way.
We have many jqxInput(Auto complete extender) on each of many web pages.
We are fetching the source for each control of a page and binding it to the controls at once.
This approach is making the whole page heavy.
We would like to know if there is a way in which we will fetch and bind the data on keypress itself, getting top 20 records on every keypress/keyup event is enough for us.

Please suggest.

[Author]

Posts