jqxInput auto complete

[EricKParticipant]

Hello to all,
Need some help with the call back when entering letters into the edit box.
I have looked at the geonames lookup example which passes multiple parameters back to the server. I have a php which I would like to use.

var csource =
{
  datatype: "json",
  datafields: [
  { name: 'companyname'},
  { name: 'id'}	
  ],
  id: 'id',
  data: {company:''},
  url: 'listdata.php'
};

var cadapter = new $.jqx.dataAdapter(csource);

$("#company").jqxInput({ source: cadapter, searchMode: 'startswith', displayMember: "companyname", valueMember: "id", width: 200, height: 22});

I know that the adapter will only read one time initially.
How do I get it to trigger a new search when entering new search criteria?
What parameter is passed when I begin to type in the edit box?

Or do I have to use the example exactly the way it is setup.

Thanks
Eric

[Peter StoevKeymaster]

Hi Eric,

There is a sample which shows how to do that – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxinput/remoteautocomplete.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[EricKParticipant]

Thanks Peter,
I was trying to create a shorter version.
Do I have to use the loadComplete function or can this be automatic?

Eric

[Peter StoevKeymaster]

Hi Eric,

If you don’t use it, when will you call the response method and ensure that your data is already loaded? The response method is what fills the auto-complete popup with data.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[EricKParticipant]

Hey Peter,
I guess, I assumed it would load the data if I had the displayMember and valueMember defined.
So, yes I will need to have the loadComplete.

I only wanted to create a shorter method to the process. Since, I will have up to 10 inputs on a form that will call a php.

Thanks again,
Eric

[Peter StoevKeymaster]

Hi Eric,

I suppose that your source function could be created outside the input, so you can reuse it for all of your inputs and set their source property to point to that function i.e you’ll create it once.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[EricKParticipant]

Hey Peter,
That’s what I was going to do. But I am not sure how to handle the formatData function.
I call the same php file and use the data:name (data:company), (data:status) to determine which sql to process.
How can I change parameter name. Here is the code:

var dataAdapter = new $.jqx.dataAdapter
  (
    { 
      datatype: "json",
      datafields: [
      { name: 'name'},
      { name: 'id'}	
      ],
      id: 'id',
      url: 'listdata.php'
      },
      {
       	autoBind: true,
        formatData: function (data) {
          data.company = query;
          return data;
        },
        loadComplete: function (data) {
          if (data.length>0){
            response($.map(data, function (item) {
                return {
                label: item.name,
                value: item.id
                }
            }));                                
	  }
     	}
     }
);

Thanks again
EricK

[Peter StoevKeymaster]

Hi Eric,

formatData defines the parameters that would be sent to the server. It depends on your application’s logic what params to send.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[EricKParticipant]

Hey Peter,
Hopefully this will finish this post.

Here is my code. I would like to make the formatdata dynamic.

var lsql = 'company';
           	 
var csource = function (query, response) {
var dataAdapter = new $.jqx.dataAdapter
  (
    { 
      datatype: "json",
      datafields: [
      { name: 'name'},
      { name: 'id'}	
      ],
      id: 'id',
      url: 'listdata.php'
      },
      {
       	autoBind: true,
        formatData: function (data) {
          data[lsql] = query;  ***** dynamic with varible
          return data;
        },
        loadComplete: function (data) {
          if (data.length>0){
            response($.map(data, function (item) {
                return {
                label: item.name,
                value: item.id
                }
            }));                                
	  }
     	}
     }
)
};

$("#company").jqxInput({ source: csource, width: 200, height: 22 });
$("#location").jqxInput({ source: csource, width: 200, height: 22});

I don’t think I am working the logic correctly. Can I pass a parameter to the csource when I setup the source:
Or do I need to approach this in another method.

Thanks so much for help.

[Peter StoevKeymaster]

Hi EricK,

If the parameter you wish to use depends on the Input tag, then a possible solution is to create a variable which stores the Input on focus and depending on the Input on focus decide what parameter to use in your formatData function.

Best Regards,
Peter Stoev

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

[Author]

Posts