JQuery ui autocomplete with multiple parameters
Locked
 
|
Hi there,
I'm struggling with JQuery ui autocomplete. I've a form with a couple of input fields: "name" and "address". Actually autocomplete is running on the "address" field (I've a list of addresses and names of my town), so far so good. Now, I'm gonna try to have an autocompletion of the "address" and "name" coupled together, e.g. user fills the "name" field (e.g. John Smith) and when he is starting to fill the "address" field, the returning values from autocomplete should be the list of addresses of John Smith. What I'm wondering is how to pass the value of the "name" field to the autocomplete so that I can use "name" and "address" together in my query Thanks Dave |
RE: JQuery ui autocomplete with multiple parameters
|
I don't know that autocomplete has any functionality for filtering. Perhaps there's a third party modification that accomplishes that; however, it should be relatively simple.
I haven't tested this, but you should be able to ask your database for the filtered data when your name field throws the blur event, and update the source option on the autocomplete component. If your data is all client-side, then you'll have to write a little JavaScript filter on your array. It could look something like this: var filterData = function() { $('input[name="address"]').disable().val('Loading addresses...'); // optional ui helper $.ajax({ ... success: function( data ) { if ( data.success ) { $('input[name="address"]').enable().val( data.results[0] ); // optional ui helper $('input[name="address"]').autocomplete( 'source', data ); } } }); } <input type="text" name="name" placeholder="Please enter your name." onblur=filterData()></input> <input type="text" name="address" placeholder="Please enter your address."></input> Something like that anyway. Hope that helps. This is probably the line you are looking for (in Smalltalk): renderComponentOn: html | someData | someData = []. ... (html jQuery: '#theAddressField') autocomplete optionAt: 'source' put: someData. RS > Date: Mon, 27 Aug 2012 06:35:41 -0700 > From: [hidden email] > To: [hidden email] > Subject: [Seaside] JQuery ui autocomplete with multiple parameters > > Hi there, > I'm struggling with JQuery ui autocomplete. > I've a form with a couple of input fields: "name" and "address". Actually > autocomplete is running on the "address" field (I've a list of addresses and > names of my town), so far so good. > > Now, I'm gonna try to have an autocompletion of the "address" and "name" > coupled together, e.g. user fills the "name" field (e.g. John Smith) and > when he is starting to fill the "address" field, the returning values from > autocomplete should be the list of addresses of John Smith. > What I'm wondering is how to pass the value of the "name" field to the > autocomplete so that I can use "name" and "address" together in my query > Thanks > Dave > > > > -- > View this message in context: http://forum.world.st/JQuery-ui-autocomplete-with-multiple-parameters-tp4645397.html > Sent from the Seaside General mailing list archive at Nabble.com. > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
Hi Robert,
I solved it. I haven't data on client and I don't use the blur event, it's enough to read the "name" value via JQuery. On JQAutocomplete, I implemented a method mimicking JQAutocomplete>>sourceCallback: but with a two arguments block JQAutocomplete>>customSourceCallback: aTwoArgumentsBlock | term1 term2 | self source: ((self jQuery getJson callback: [ :value | term1 := value ] value: (JSStream on: 'request.term'); callback: [ :value | term2 := value ] value: (JSStream on: '$(''#name'').val()'); text: [ :stream | stream json: (aTwoArgumentsBlock value: term1 value:term2).]; onSuccess: 'response(arguments[0])'; dataType: 'jsonp') asFunction: #('request' 'response')) request.term is "address" field and you can see I easily grabbed the "name" value Eventually, on my class, I linked the autocomplete to "address" field this way MyClass>>autocompleteOnAddress self addressField script: (html jQuery this autocomplete delay: 0; customSourceCallback: [ :address :name| self tryToFind: address and: name ]). In MyClass>>tryToFind:and: I made the search. That's it. Cheers Dave |
RE: JQuery ui autocomplete with multiple parameters
|
|
Nice! Looks good. Are you able to do this:
callback: [:val1 :val2 | term1 := val1. term2 := val2. ] value: (JSStream on: 'request.term') value: (JSStream on: '$(''#name'').val()'); instead of this: callback: [:val1 :val2 | term1 := value ] value: (JSStream on: 'request.term'); callback: [ :value | term2 := value ] value: (JSStream on: '$(''#name'').val()');Just a thought. RS > Date: Tue, 28 Aug 2012 00:47:06 -0700 > From: [hidden email] > To: [hidden email] > Subject: [Seaside] RE: JQuery ui autocomplete with multiple parameters > > Hi Robert, > I solved it. I haven't data on client and I don't use the blur event, it's > enough to read the "name" value via JQuery. > > > On JQAutocomplete, I implemented a method mimicking > JQAutocomplete>>sourceCallback: but with a two arguments block > > JQAutocomplete>>customSourceCallback: aTwoArgumentsBlock > > | term1 term2 | > self source: ((self jQuery getJson > > callback: [ :value | term1 := value ] value: (JSStream on: > 'request.term'); > callback: [ :value | term2 := value ] value: (JSStream on: > '$(''#name'').val()'); > text: [ :stream | stream json: (aTwoArgumentsBlock value: term1 > value:term2).]; > onSuccess: 'response(arguments[0])'; > dataType: 'jsonp') asFunction: #('request' 'response')) > > request.term is "address" field and you can see I easily grabbed the "name" > value > > > > Eventually, on my class, I linked the autocomplete to "address" field this > way > > MyClass>>autocompleteOnAddress > self addressField script: (html jQuery this autocomplete delay: 0; > customSourceCallback: [ :address :name| self tryToFind: address and: name > ]). > > > > In MyClass>>tryToFind:and: I made the search. That's it. > > > > Cheers > Dave > > > > -- > View this message in context: http://forum.world.st/JQuery-ui-autocomplete-with-multiple-parameters-tp4645397p4645458.html > Sent from the Seaside General mailing list archive at Nabble.com. > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
I gonna try it Dave --
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
«
Return to Seaside General
|
1 view|%1 views
| Free forum by Nabble | Edit this page |