通过第一个输入标签自动完成输入

Question

我需要帮助将 2 个代码合二为一。

第一个是带有自动完成标签的输入：

HTML：

<h3>Type in the name of your favorite programming language!</h3>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags"/>
</div> 

JS：

$(document).ready(function() {
  var languages = ["Ada", "Java", "LISP", "Javascript", "PHP", "C", "C++", "Visual Basic", "HTML", "CSS", "JQuery"];
  $("#tags").autocomplete({
    source: languages
  });
});

第二个是选择选项自动填充的 3 个输入：

http://jsfiddle.net/zunrk/

我希望最终结果是前 4 个输入，第一个是由标签自动完成的，当您选择一个标签时，它会根据相同的连接自动填充其他输入

谢谢。

Answer 1

这里有一个解决方案http://jsfiddle.net/zunrk/309/

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

ids[0] = "6";
use[0] = "bsmith";
ful[0] = "Buddy Smith";

ids[1] = "2";
use[1] = "lsmith";
ful[1] = "Libbie Smith";

ids[2] = "4";
use[2] = "asmith";
ful[2] = "Andy Smith";


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

<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" ></p>
  <p>use <input type="text" id="use" name="username" ></p>
  <p>ful <input type="text" id="ful" name="full_name" ></p>
</form>

希望这会对你有所帮助。