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

Dynamically assign variable to jquery autocomplete query string

本文关键字:查询 字符串 变量 动态分配 jquery      更新时间:2023-09-26

我正在编写一个表单,用户可以在其中提交播放列表。有一个"艺术家"领域和一个"歌曲"领域。两者都是输入类型"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.sartist,则var_export($_GET)会产生

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

因此,我怀疑查询字符串在加载后无法修改。是否有人有一个可行的解决方案,允许变量动态分配给自动完成查询字符串?基本上,我需要"歌曲"自动完成建议,这取决于"艺术家"字段的价值。

您只需要使用一个函数作为源,将多个动力学参数传递给查询:

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

在本例中,如果当前input.song的值为"high hope",而#myparam字段的值为为"pink",则查询将显示为:searchDev.php?term=high+hope&type=song&myparam=pink

Fiddle(没有真正的数据源,只需查看控制台(:http://jsfiddle.net/RfuBP/3/jquery自动完成源选项的文档:http://api.jqueryui.com/autocomplete/#option-源

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