Ajax生成的选择框的值在与jquery auto-complete相关联的调用时不变

Question

下面的代码有一个id为"eservice"的选择框和一个id为"servicename"的文本字段。此代码通过检查服务选择框中的活动服务来自动完成servicename文本字段。但不幸的是，在选择框更改后，源字符串仍然保持不变。

$( "#servicename" ).autocomplete({
        source: "index.php?key="+($('#theservice').find('option:selected').val()),
        minLength: 2,
    });

非常感谢

Answer 1

可能是delegation问题。

添加了自动完成传播示例

//build the autocomplete function, sans source
$('#servicename').autocomplete({
  minLength: 2
});
var theArray = [];
$('body').on('change', 'select', function(){
  $.ajax({
    url: 'index.php?key='+$(this).val(),
    dataType: 'json/jsonp',
    success: function(data){
      //i don't know what the array you return looks like, but autocomplete expets a key:value relationship
      $.each(data, function(key, value){
        theArray.push({label: value, value: key});
      });
      //a custom function to pass the array into
      startAutoComplete(theArray);
    }
  });
});
function startAutoComplete(array){
  $('#servicename').autocomplete('option', 'source', array);
}

使用上面的代码，我们实例化了autocomplete实例，我们只确定了我们需要的参数，不包括源。

然后，我们定义一个空数组，可以将ajax请求返回的数据推送到其中。

在select函数中，我们将值传递给要解析的服务器。我不知道您是否期望JSON/JSONP格式，所以您必须自己更改。

在success:function(data)中，我们从服务器返回请求，最好是响应为json_encode'ed。此外，当我们将值推入数组时，最好使用key -> value关系。自动完成允许像function(event, ui){ //do stuff with ui.item.label / ui.item.value}’一样访问label和value

我们在document.ready的作用域之外声明了一个未初始化的函数，并将数组传递到该函数中。在这个函数中，我们更改自动完成的来源。

希望这一切都有意义。

Answer 2

使用.autocomplete( "option" , optionName , [value] )方法解决问题

$（"#servicename"）.自动完成（｛

        source: "index.php?key="+($('#theservice').find('option:selected').val()),
        minLength: 2,
            search: function( event, ui ) {
$( "#servicename" ).autocomplete( "option" ,'source' ,'index.php?key="+($('#theservice').find('option:selected').val()));}
    });