jquery 自动完成输入数组

Question

很抱歉打扰你，但我已经检查并尝试了谷歌的几个结果，但无法让我的小想法起作用，问题是我有以下自动完成脚本，如果我只是使用它，它运行良好当时有一个输入，但是我得到了输入数组，所以每当我从自动完成输入中选择 somenting 时，它会更改所有其他同名输入，有人能指导我正确的方向吗？

我的输入看起来像这样

<input type="hidden" name="origin-zone[]">
<input type="text" name="origin[]" class="form-control boxed origin uppercase" required="required" autocomplete="off">

我的脚本是这样的：

$(document).on('keydown', function() {
  var zone = $("input[name='origin-zone[]']").each(function(){
    return $(this).val(ui.item.id)
  });

  var origin = $("input[name='origin[]']").each(function(){
    return $(this).val(ui.item.value)
  });

  $('.origin').autocomplete({
    source: "php/hotel.php",
    minLength: 1,
    select: function(event, ui) {
      zone,
      origin
    }
  });
  $( ".origin" ).autocomplete( "option", "appendTo", ".eventInsForm" );
});

提前致谢！

Answer 1

在select回调（以及其他插件回调）中， this是自动完成注册到的元素实例。

使用它遍历到关联的匹配输入以设置其他值

 $(".language").autocomplete({ select: function(evt, ui) { $(this).parent().find('.language-id').val(ui.item.id); }, source: getData() }); function getData(){ return [{"label":"ActionScript","value":"ActionScript","id":1},{"label":"AppleScript","value":"AppleScript","id":2},{"label":"Asp","value":"Asp","id":3},{"label":"BASIC","value":"BASIC","id":4},{"label":"C","value":"C","id":5},{"label":"C++","value":"C++","id":6},{"label":"Clojure","value":"Clojure","id":7},{"label":"COBOL","value":"COBOL","id":8},{"label":"ColdFusion","value":"ColdFusion","id":9},{"label":"Erlang","value":"Erlang","id":10},{"label":"Fortran","value":"Fortran","id":11},{"label":"Groovy","value":"Groovy","id":12},{"label":"Haskell","value":"Haskell","id":13},{"label":"Java","value":"Java","id":14},{"label":"JavaScript","value":"JavaScript","id":15},{"label":"Lisp","value":"Lisp","id":16},{"label":"Perl","value":"Perl","id":17},{"label":"PHP","value":"PHP","id":18},{"label":"Python","value":"Python","id":19},{"label":"Ruby","value":"Ruby","id":20},{"label":"Scala","value":"Scala","id":21},{"label":"Scheme","value":"Scheme","id":22}] }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="ui-widget"> <p>Select programming languages, ID will be set when each language selected</p> <div> <label>Language: </label> <input class="language" placeholder="Select language"> <label>ID: </label> <input class="language-id" readonly> </div> <div> <label>Language: </label> <input class="language" placeholder="Select language"> <label>ID: </label> <input class="language-id" readonly> </div> <div> <label>Language: </label> <input class="language" placeholder="Select language"> <label>ID: </label> <input class="language-id" readonly> </div> </div>