jQuery UI 自动完成将所选项目 ID 存储在输入的 value 属性中

Posted

技术标签:

【中文标题】jQuery UI 自动完成将所选项目 ID 存储在输入的 value 属性中【英文标题】：jQuery UI autocomplete store the selected items ID in input's value attribute 【发布时间】：2018-07-16 10:56:22 【问题描述】：

我正在处理动态时间表。我的项目字段正在使用 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 >Project name</th>
      <th >Mon</th>
      <th >Tue</th>
      <th >Wed</th>
      <th >Thur</th>
      <th >Fri</th>
      <th >Sat</th>
      <th >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" >
        <a>Total Time:</a>
      </td>
      <td >
        <input class="form-control full-width" id="full-name-f1" type="text" value="7.25" style="background-color:#DEE0E2;">
      </td>
      <td >
        <input class="form-control full-width" id="full-name-f1" type="text" value="8" style="background-color:#DEE0E2;">
      </td>
      <td >
        <input class="form-control full-width" id="full-name-f1" type="text" value="7.5" style="background-color:#DEE0E2;">
      </td>
      <td >
        <input class="form-control full-width" id="full-name-f1" type="text" value="7" style="background-color:#DEE0E2;">
      </td>
      <td >
        <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;">
      </td>
      <td >
        <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;">
      </td>
      <td >
        <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>

【问题讨论】：

【参考方案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 自动完成change event documentation.

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 >Project name</th>
      <th >Mon</th>
      <th >Tue</th>
      <th >Wed</th>
      <th >Thur</th>
      <th >Fri</th>
      <th >Sat</th>
      <th >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" >
        <a>Total Time:</a>
      </td>
      <td >
        <input class="form-control full-width" id="full-name-f1" type="text" value="7.25" style="background-color:#DEE0E2;">
      </td>
      <td >
        <input class="form-control full-width" id="full-name-f1" type="text" value="8" style="background-color:#DEE0E2;">
      </td>
      <td >
        <input class="form-control full-width" id="full-name-f1" type="text" value="7.5" style="background-color:#DEE0E2;">
      </td>
      <td >
        <input class="form-control full-width" id="full-name-f1" type="text" value="7" style="background-color:#DEE0E2;">
      </td>
      <td >
        <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;">
      </td>
      <td >
        <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;">
      </td>
      <td >
        <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>

【讨论】：

您好，感谢您的回答。它没有解决我的问题。我需要更改使用值而不是 id 吗？ 我的问题是我无法设置$("#project").attr("value", item.label); - 它总是会采用json文件中的最后一个对象 是的，你需要把它改成 value，然后删除你刚才说的那行，那行什么都做不了，相信我。试试看。 我按照您的建议进行了更改。它仍然不起作用。我没有更改我的 json 文件中的任何内容，是否需要更改任何内容？ mu 问题背后的重点是让我的 html value 属性显示 JSON id 值。 我已经更新了我的问题，请看看这是否更有意义。我已经实施了您的更改，但仍然无法正常工作。谢谢:)

以上是关于jQuery UI 自动完成将所选项目 ID 存储在输入的 value 属性中的主要内容，如果未能解决你的问题，请参考以下文章

如何在jquery移动自动完成中获取所选列表数据的ID

带有引导导航栏的 MVC - 将所选项目设置为活动

具有多项选择的 ExpandableListView 将所选项目保存到数组中

自动选择单一匹配jQuery UI自动完成组合框

将所选选项与jQuery中列表中的最后一个进行比较

Jquery ui自动完成填充带有ID​​的隐藏字段