阿贾克斯自动完成的jQuery不工作当文本字段不为空

Question

我与Ajax autocomplete for jquery的工作和我的HTML代码

<input type="text" name="autocomplete" id="globalBCCAutoComplete"> 

和我autocomplete JS代码是

$(document).ready(function() { 
    var countries = [ 
     { value: '{contract_name}', data: 'Contact Name'}, 
     { value: '{user_company}', data: 'User Company' } 
    ]; 
    $('#globalBCCAutoComplete').autocomplete({ 
     lookup: countries, 
     onSelect: function (suggestion) { 
      //alert('You selected: ' + suggestion.value + ', ' + suggestion.data); 
      console.log('You selected: ' + suggestion.value + ', ' + suggestion.data); 
     } 
    }); 
}); 

，它是工作罚款，但当我在文本字段中添加值属性：

<input type="text" name="autocomplete" id="globalBCCAutoComplete" value="This is test"> 

添加值autocomplete不起作用。问题是什么？

Answer 1

从评论我明白你想要的是将建议对象的输入的初始值集合添加到建议对象，因此它将充当前缀。

你为什么不这么说？使用代码

：

HTML：

<input type="text" name="autocomplete" id="globalBCCAutoComplete" value="john"> 

JAVASCRIPT：

$(document).ready(function() { 

     let countries = [ 
      { value: '{contract_name}', data: 'Contact Name'}, 
      { value: '{user_company}', data: 'User Company' } 
     ]; 

     //get current value from the textbox 
     let initialTextValue = $('#globalBCCAutoComplete').val().trim(); 

     //append the value to your JSON objects. 
     $(countries).each(function(key, country) { 
      country.value = initialTextValue + ' ' + country.value 
     }); 

     //the rest of your code: 
     $('#globalBCCAutoComplete').autocomplete({ 
      lookup: countries, 
      onSelect: function (suggestion) { 
       console.log('You selected: ' + suggestion.value + ', ' + suggestion.data); 
      } 
     }); 
    }); 

的jsfiddle例如：https://jsfiddle.net/7g4nnnoz/5/

---

替代WOU LD是ES6箭头功能与.MAP（）函数：

//append the values to the json object. 
countries.map((country) => { 
    country.value = initialTextValue + ' ' + country.value 
});