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>