jQuery UI自動完成功能將所選項目ID存儲在輸入的value屬性中

Question

我正在制定動態時間表。 我的項目字段使用的是jQuery自動完成功能，該功能會從json文件中提取其數據。 從自動完成中選擇一個項目后，我正在嘗試將輸入字段的value=""設置為所選項目的id 。

我的json文件內容是這樣的

{
  "projectList": [{
    "label": "Some Project",
    "id": "BP1927",
    "desc": "desc1"
  }, {
    "label": "Some Other Project",
    "id": "BP1827",
    "desc": "desc1"
  }, {
    "label": "BOSS Support",
    "id": "BP6354",
    "desc": "desc3"
  }, {
    "label": "Another Support",
    "id": "BP2735"
  }]
}

我要做的是選擇第一項Some Project ，我想在輸入框中顯示Some Project並將ID “ BP1927”存儲在輸入框的value屬性中。

使用我當前的代碼，我的自動完成功能會將項目標簽返回到輸入框，但是當我檢查輸入元素時，它將始終顯示value “ BP2735”-恰好是json文件中的最后一個對象。 我究竟做錯了什么？

 jQuery(function($) { var rowTemplate = $('table.tablesubmit>tbody>tr:first').remove(); var autoComp = { source: function(request, response) { var regex = new RegExp(request.term, 'i'); response($.map(myJSONdata.projectList, function(item) { if (regex.test(item.id) || regex.test(item.label)) { return { label: item.label, value: item.label, id: item.id }; } $("#project").attr("value", item.id); })); } }; $('.pluslink').click(function(event) { var newRow = rowTemplate.clone(); newRow.find('input:first').autocomplete(autoComp); $('table.tablesubmit tr:last').before(newRow); }); $("table.tablesubmit").on('click', '.minuslink', function(e) { $(this).parent().parent().remove(); }); $('.pluslink').click(); //Creates the first row }); var myJSONdata = { "projectList": [{ "label": "Some Project", "id": "BP1927", "desc": "desc1" }, { "label": "Some Other Project", "id": "BP1827", "desc": "desc1" }, { "label": "BOSS Support", "id": "BP6354", "desc": "desc3" }, { "label": "Another Support", "id": "BP2735" }] } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <table class="tablesubmit"> <thead> <tr> <th width="30%">Project name</th> <th width="10%">Mon</th> <th width="10%">Tue</th> <th width="10%">Wed</th> <th width="10%">Thur</th> <th width="10%">Fri</th> <th width="10%">Sat</th> <th width="10%">Sun</th> <th></th> </tr> </thead> <tbody> <tr> <td> <input class="form-control full-width" id="project" type="text"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="1.25"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="0"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="5"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="1"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="5.5"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="0"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="0"> </td> <td> <button class="btn btn-danger minuslink">Delete</button> </td> </tr> <tr> <td class="bold" width="25%"> <a>Total Time:</a> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="7.25" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="8" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="7.5" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="7" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;"> </td> <td>37.5</td> </tr> </tbody> </table> <button class="btn btn-primary pluslink">Add new project</button> 

Answer 1

根據與OP進行的聊天討論更新答案

問題在於，您正在嘗試在生成建議列表時設置屬性。

   source: function(request, response) {
      var regex = new RegExp(request.term, 'i');
      response($.map(myJSONdata.projectList, function(item) {
        if (regex.test(item.id) || regex.test(item.label)) {
          return {
            label: item.label,
            value: item.label,
            id: item.id
          };
        }
        $("#project").attr("value", item.id);
      }));
    }

因此，在生成建議列表時，每個項目都將其ID放入value屬性中，因此您在隨后檢查元素時會看到最后一個項目ID。

選擇建議時，生成建議列表時，必須設置值。 正確的方法是將輸入更改事件處理程序傳遞給自動完成功能，該功能將在選擇建議時設置您的屬性。

    change: function(event, ui) {
        if(ui.item){ //this checks if any value is selected
            $(event.target).attr('value',ui.item.id);
        }
    },

jQuery UI自動完成更改事件文檔。

 jQuery(function($) { var rowTemplate = $('table.tablesubmit>tbody>tr:first').remove(); var autoComp = { change: function(event, ui) { if(ui.item)$(event.target).attr('value',ui.item.id); }, source: function(request, response) { var regex = new RegExp(request.term, 'i'); response($.map(myJSONdata.projectList, function(item) { if (regex.test(item.id) || regex.test(item.label)) { return { label: item.label, value: item.label, id: item.id }; } $("#project").attr("value", item.id); })); } }; $('.pluslink').click(function(event) { var newRow = rowTemplate.clone(); newRow.find('input:first').autocomplete(autoComp); $('table.tablesubmit tr:last').before(newRow); }); $("table.tablesubmit").on('click', '.minuslink', function(e) { $(this).parent().parent().remove(); }); $('.pluslink').click(); //Creates the first row }); var myJSONdata = { "projectList": [{ "label": "Some Project", "id": "BP1927", "desc": "desc1" }, { "label": "Some Other Project", "id": "BP1827", "desc": "desc1" }, { "label": "BOSS Support", "id": "BP6354", "desc": "desc3" }, { "label": "Another Support", "id": "BP2735" }] } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css"/> <table class="tablesubmit"> <thead> <tr> <th width="30%">Project name</th> <th width="10%">Mon</th> <th width="10%">Tue</th> <th width="10%">Wed</th> <th width="10%">Thur</th> <th width="10%">Fri</th> <th width="10%">Sat</th> <th width="10%">Sun</th> <th></th> </tr> </thead> <tbody> <tr> <td> <input class="form-control full-width" id="project" type="text"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="1.25"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="0"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="5"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="1"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="5.5"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="0"> </td> <td> <input class="form-control full-width" id="full-name-f1" type="text" value="0"> </td> <td> <button class="btn btn-danger minuslink">Delete</button> </td> </tr> <tr> <td class="bold" width="25%"> <a>Total Time:</a> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="7.25" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="8" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="7.5" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="7" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;"> </td> <td width="10%"> <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;"> </td> <td>37.5</td> </tr> </tbody> </table> <button class="btn btn-primary pluslink">Add new project</button>