Reputation: 1707
I'm coding form where a user can submit playlists. There is an 'artist' field and a 'song' field. Both are input type 'text'.
I'm attempting to use jquery's autocomplete functionality in both fields. Autocomplete results for the artist are functions of user-keystrokes and autocomplete results for songs are functions of user-keystrokes AND the value of the artist input field.
Autocomplete seems to work to populate a list of suggestions under the artist input field. search.php
is the script reading the query string.
$(".artist").autocomplete("searchDev.php?type=artist&"+mydate.getTime(), {
width: 180,
selectFirst: false
});
In search.php
, a var_export of $_GET in searchDev.php after an a
keystroke yields
array (
'type' => 'artist',
1367531572213 => '',
'q' => 'a',
'limit' => '10',
'timestamp' => '1367531576911',
)
This is just fine. However, when I try to supply a variable to the query string(here window.sartist) in autocomplete(for the song input field),
$(".song").autocomplete("search.php?type=song&sartist="+window.sartist+"&"+mydate.getTime(), {
width: 180,
selectFirst: false
});
sartist
is not defined correctly, ie var_export($_GET)
in search.php yields
array (
'type' => 'song',
'sartist' => '[object HTMLInputElement]',
1367525807081 => '',
'q' => 'a',
'limit' => '10',
'timestamp' => '1367526169637',
)
if a global variable, not attached to the window is used in place of window.sartist
in the query string, var_export($_GET)
yields
array (
'type' => 'song',
'sartist' => '',
1367528252501 => '',
'q' => 'a',
'limit' => '10',
'timestamp' => '1367528260585',
)
So I suspect that the query string cannot be modified after it is loaded. Does anyone have a viable workaround to allow variables to be dynamically assigned to the autocomplete query string? Basically I need the 'song' autocomplete suggestions contingent upon the value of the 'artist' field.
Upvotes: 0
Views: 2308
Reputation: 4544
You just need to use a function as source to pass multiple dynamics params to the query :
$('.song').autocomplete({
var value = $(this).val();
source:function( request, response ) {
$.getJSON( "searchDev.php", {
term: value ,
data:{
type:"song",
myparam:$('#myparam').val()
}
}, response );
}
})
In this example, if current input .song have value 'high hope' and the #myparam field have value "pink" the query will looks like : searchDev.php?term=high+hope&type=song&myparam=pink
Fiddle (no real data source, just see the console) : http://jsfiddle.net/RfuBP/3/ Doc for the source option of jquery autocomplete : http://api.jqueryui.com/autocomplete/#option-source
PS : In your code, are you sure that window.sartist returns a value and not the element ?
Upvotes: 2