rocketas
rocketas

Reputation: 1707

Dynamically assign variable to jquery autocomplete query string

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

Answers (1)

RafH
RafH

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

Related Questions