Remote Source Without jqxDataAdapter

[tmcneillParticipant]

I want to set up a text field with auto-complete behavior searching data via a web service. I want the same behavior as in this demo: http://jsfiddle.net/jqwidgets/EmYsZ/.

I have the desired behavior using a jqxInput widget. However, jqxInput doesn’t support custom rendering of list items, which is important for my application. The jqxComboBox widget supports custom list item rendering, so I’m trying to adapt my code to use that widget instead.

The setup with jqxInput looks something like this:
<input type='text' id='widget' />

$('#widget').jqxInput({
  source: function(query, response){
    $.ajax({
      url: *web_service_url*,
      method: 'POST',
      data: {query: query},
      dataType: 'json',
      beforeSend: function(xhr){
        xhr.setRequestHeader(*header_for_authentication_token*, *header_value*);
      },
      success: function(data){
        var result = [];
        *loop over data and push values onto result*
        response(result);
      }
  },
  *other properties*
});

Since there is no callback function as a second parameter of the source function of jqxComboBox, I can’t update the list items the same way.

From what I’ve read in the API documentation, I understand that I’ll need to set remoteAutoComplete to true as well as implement the search property. I’m trying to understand how everything pieces together. I’d like to avoid using the jqxDataAdapter if possible, similar to my solution with the jqxInput widget. Is that possible?

In the JSFiddle demo linked above, I’m not seeing that the search string is passed to the web service at any point. Maybe it’s that the data adapter does that behind the scenes. But it appears that the web service is just returning a large, unfiltered list, and filtering is done in the formatData function. The search string is passed to the search function, but it’s ignored.

Similar to the solution using jqxInput, without using jqxDataAdapter, is there a way to allow the search string to be included as part of an asynchronous web service call and then use the result of the web service to update the item list after each keypress?

Thanks for any suggestions.

[HristoParticipant]

Hello tmcneill,

If you would like could try to use Input with change the source
(e.g.

var newSource = new Array('France', 'Germany');
 $("#input").jqxInput({ source: newSource })

) but I cannot warrant to get better solution.
The jqxComboBox gives more options.
Also you could read about jqxListBox because it is parent of jqxComboBox.
About the example, every time when the user write type something this will start “search” callback there has row dataAdapter.dataBind(); that make call to the ‘dataAdapter’.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[tmcneillParticipant]

Thank you for your reply. However some of the reply doesn’t make much sense, like this:

“If you would like could try to use Input with change the source but I cannot warrant to get better solution.”

Regardless, After fiddling around with things for a few more hours, I found a solution. I’ll put it here in case anyone else is trying to do the same thing.

The new code looks something like this:
<div id='widget'></div>

var widget = $('#widget');
widget.jqxComboBox({
  minLength: 1,
  remoteAutoComplete: true,
  source: [],
  search: function(query){ // This function gets called after a short delay each time the search string changes and is longer than the minLength property.
    $.ajax({
      url: *web_service_url*,
      method: 'POST',
      data: {query: query},
      dataType: 'json',
      beforeSend: function(xhr){
        xhr.setRequestHeader(*header_for_authentication_token*, *header_value*);
      },
      success: function(data){
        var items = [];
        for (var i in data){
          items.push({
            label: *label*,
            value: *value*
            *other_properties*: *other_data*,
          });
        }

        // Preserve the search string. (Not necessary, but it gets wiped out when updating the source.)
        var search_string = widget.jqxComboBox('searchString') // Undocumented function that I found by chance in one of the jsfiddle demos.

        // Update the source.
        widget.jqxComboBox('source', items);

        // Restore the search string.
        widget.jqxComboBox('val', search_string);
      }
  },
  *other properties*
});

I’m now able to also use the renderer property to custom render the list items. It looks something like this:

renderer: function(index, label, value){
  var item_data = field_widget.jqxComboBox('getItem', index).originalItem; // This is the object that was created in the items array above.
  var display = '';
  display += *html and stuff from item data*;
  return display
},

No data adapter needed.

[Author]

Posts