自动填充输入值的问题

时间:2017-10-17 10:50:40

标签: javascript input autocomplete

我试图替换值但总是“未定义”。

工作

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>

1 个答案:

答案 0 :(得分:0)

检查以下代码:

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);
  }
});