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.

Answers


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 ?


Need Your Help

Splitting an array at random in Scala

scala random collect

I'm building a decision tree system in Scala, but some of the entries in my data have identical attributes.

Windows forms and XNA - Draw is not realtime

winforms editor map drawing xna

I am currently working on a Level Editor for XNA which is built by combining Windows Forms and XNA.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.