自动完成输入值的问题答案

【问题标题】：issues with autocomplete inputs values自动完成输入值的问题
【发布时间】：2017-10-17 20:01:56
【问题描述】：

我正在尝试替换值，但总是“未定义”。

工作

ids[0] = "n";

不工作：

ids[0] = "nesya";

完整代码在这里：

<body>
  <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form name="form1" method="post" action="">
  <p>ids <input type="text" id="ids" name="id" class="ui-autocomplete-input" autocomplete="off"></p>
  <p>use <input type="text" id="use" name="username" class="ui-autocomplete-input" autocomplete="off"></p>
  <p>ful <input type="text" id="ful" name="full_name" class="ui-autocomplete-input" autocomplete="off"></p>
</form>

<script type="text/javascript">//<![CDATA[

var ids = new Array();
var use = new Array();
var ful = new Array();

ids[0] = "nesya";
use[0] = "aaa";
ful[0] = "text1";

ids[1] = "2";
use[1] = "bbb";
ful[1] = "text2";

ids[2] = "3";
use[2] = "ccc";
ful[2] = "text3";


function Choice(autoEle) {
  if(autoEle === 'use') {
    selectedIndex = use.indexOf( $('#use').val());
  } else if(autoEle === 'ful') {
    selectedIndex = ful.indexOf( $('#ful').val());
  } else {
    selectedIndex = ids.indexOf( $('#ids').val());
  }


  document.getElementById("ids").value = ids[selectedIndex];
  document.getElementById("use").value = use[selectedIndex];
  document.getElementById("ful").value = ful[selectedIndex];
}

$("#use").autocomplete({
  source: use,
  select: function(){
    $('#selectUsers option[value="' + (use.indexOf( $('#use').val()) + 1) + '"]').attr('selected','selected');
    Choice('use');
  }
});

$("#ids").autocomplete({
  source: ids,
  select: function(){
    $('#selectUsers option[value="' + (ids.indexOf( $('#ids').val()) + 1) + '"]').attr('selected','selected');
    Choice('ids');
  }
});

$("#ful").autocomplete({
  source: ful,
  select: function(){
    $('#selectUsers option[value="' + (ful.indexOf( $('#ful').val()) + 1) + '"]').attr('selected','selected');
    Choice('ful');
  }
});
//]]> 

</script>

</body>

【问题讨论】：

标签： javascript input autocomplete

【解决方案1】：

检查以下代码：

var ids = new Array();
var use = new Array();
var ful = new Array();

ids[0] = "nesya";
use[0] = "aaa";
ful[0] = "text1";

ids[1] = "2";
use[1] = "bbb";
ful[1] = "text2";

ids[2] = "3";
use[2] = "ccc";
ful[2] = "text3";


function Choice(autoEle, item) {

  if(autoEle === 'use') {
    selectedIndex = use.indexOf(item);
  } else if(autoEle === 'ful') {
    selectedIndex = ful.indexOf(item);
  } else {
    selectedIndex = ids.indexOf(item);
  }

  document.getElementById("ids").value = ids[selectedIndex];
  document.getElementById("use").value = use[selectedIndex];
  document.getElementById("ful").value = ful[selectedIndex];
}

$("#use").autocomplete({
  source: use,
  select: function(e, data){
    $('#selectUsers option[value="' + (use.indexOf( $('#use').val()) + 1) + '"]').attr('selected','selected');
    Choice('use', data.item.value);
  }
});

$("#ids").autocomplete({
  source: ids,
  select: function(e, data){
    $('#selectUsers option[value="' + (ids.indexOf( $('#ids').val()) + 1) + '"]').attr('selected','selected');
    Choice('ids', data.item.value);
  }
});

$("#ful").autocomplete({
  source: ful,
  select: function(e, data){
    $('#selectUsers option[value="' + (ful.indexOf( $('#ful').val()) + 1) + '"]').attr('selected','selected');
    Choice('ful', data.item.value);
  }
});

【讨论】：

它有效，但是在从第一个输入中选择一个值后，我如何才能仅对第一个输入使用自动完成功能而不禁用第二个和第三个输入的自动填充？
你希望在第一个上自动填充选择事件，但在其他输入中，如果用户选择它不会将数据填充到其他输入。这就是你想要的对吗？