JQuery ui autocomplete with multiple parameters

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

JQuery ui autocomplete with multiple parameters

Dave
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
Reply | Threaded
Open this post in threaded view
|

RE: JQuery ui autocomplete with multiple parameters

Robert Sirois
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
Reply | Threaded
Open this post in threaded view
|

RE: JQuery ui autocomplete with multiple parameters

Dave
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
Reply | Threaded
Open this post in threaded view
|

RE: JQuery ui autocomplete with multiple parameters

Robert Sirois
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
Reply | Threaded
Open this post in threaded view
|

RE: JQuery ui autocomplete with multiple parameters

Dave
I gonna try it
Dave

--


Sent from my iPhone

On Aug 28, 2012, at 18:09, Robert Sirois <[hidden email]> wrote:

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

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside