动态地将变量分配给jquery自动完成查询字符串

时间:2013-05-02 22:04:44

标签: javascript jquery autocomplete

我是用户可以提交播放列表的编码表单。有一个'艺术家'字段和一个'歌曲'字段。两者都是输入类型'text'。

我正在尝试在两个字段中使用jquery的自动完成功能。艺术家的自动填充结果是用户击键功能,歌曲的自动填充结果是用户击键功能和艺术家输入字段的值。

自动填充似乎可以填充艺术家输入字段下的建议列表。 search.php是读取查询字符串的脚本。

$(".artist").autocomplete("searchDev.php?type=artist&"+mydate.getTime(), {
    width: 180,
    selectFirst: false
});

search.php中,在a按键产生后,searchDev.php中的$ _GET的var_export

array (
  'type' => 'artist',
  1367531572213 => '',
  'q' => 'a',
  'limit' => '10',
 'timestamp' => '1367531576911',
)

这很好。 但是,当我尝试在自动完成中为查询字符串(此处为window.sartist)提供变量时(对于歌曲输入字段),

    $(".song").autocomplete("search.php?type=song&sartist="+window.sartist+"&"+mydate.getTime(),      {
    width: 180, 
    selectFirst: false
}); 

sartist未正确定义,即search.php中的var_export($_GET)产生

array (
  'type' => 'song',
  'sartist' => '[object HTMLInputElement]',
  1367525807081 => '',
  'q' => 'a',
  'limit' => '10',
  'timestamp' => '1367526169637',
)

如果在查询字符串中使用未附加到窗口的全局变量代替window.sartistvar_export($_GET)会产生

array (
  'type' => 'song',
  'sartist' => '',
  1367528252501 => '',
  'q' => 'a',
  'limit' => '10',
  'timestamp' => '1367528260585',
)

所以我怀疑查询字符串在加载后无法修改。有没有人有可行的解决方法来允许将变量动态分配给自动完成查询字符串?基本上我需要根据“艺术家”字段的价值提供“歌曲”自动填充建议。

1 个答案:

答案 0 :(得分:2)

您只需使用函数作为源将多个动态参数传递给查询:

$('.song').autocomplete({
   var value = $(this).val(); 
    source:function( request, response ) {
          $.getJSON( "searchDev.php", {
            term: value ,
              data:{
                  type:"song",
                  myparam:$('#myparam').val()
              }
          }, response );
   }
})

在此示例中,如果当前输入.song的值为“high hope”且#myparam字段的值为“pink”,则查询将如下所示:searchDev.php?term=high+hope&type=song&myparam=pink

小提琴(没有真正的数据源,只看控制台):http://jsfiddle.net/RfuBP/3/ 有关jquery自动填充的源选项的文档:http://api.jqueryui.com/autocomplete/#option-source

PS:在你的代码中,你确定window.sartist返回一个值而不是元素吗?