将javascript值传递给html输入标签

Question

我想将值从 jquery 传递到我的 html 代码。

function setMembers(members){
var members = members;
$('.member-search').autocomplete({
source: function (request, response) {
  var regex = new RegExp(RegExp.escape(request.term), "i");
  var recs = $.grep(members, function (obj) { 
    return ((regex.test(obj.first +" "+ obj.last)))
  })
  response($.map(recs, function (item) {
    return {
      label: item.first + " " + item.last,
      value: item.first + " " + item.last,
      id: item.id
    }
  }));
},
}

在 return 中，我将 item.first 和 item.last 作为 value 和 item.id 作为 id 传递。我想将此 id 值传递给我的 html 输入标记值。这是我的html。

<input type="text" class="form-control member-search" placeholder="Choose team member.." id="assigned_to" name="assigned_to" value="">

我可以传递 item.last 和 item.first 但不能传递 item.id。有没有办法做到这一点。 如果我使用 item.id 作为 return 语句的 value 我可以将它传递给输入标签值，但我的自动完成输出是错误的。它显示用户 ID 如下。

Answer 1

您的代码存在一些问题。首先，您不必使用每个jQuery 函数；现在的浏览器确实有并支持filter 而不是grep，并且默认情况下数组确实有一个map 方法。此外，由于您有简单的文本，因此无需转义正则表达式，因此您可以避免 RegExp.escape 函数的 polyfill。 jquery.grep 像 filter 方法一样，需要一个布尔返回值，而不是像你返回的字符串。 jQuery UI autocomplete source 选项函数response 可以返回字符串数组（[ "Choice1", "Choice2" ]）或具有label 和value 属性的对象数组（[ { label: "Choice1", value: "value1" }, ... ]）。

功能：第三种变体，回调，提供了最大的灵活性，可用于将任何数据源连接到 自动完成，包括 JSONP。回调有两个参数：

• 一个request 对象，具有单个term 属性，它引用当前文本输入中的值。例如，如果用户输入 "new yo" 在城市字段中，自动完成项将等于 "new yo"。
• response 回调，它需要一个参数：建议给用户的数据。此数据应根据 提供的术语，并且可以采用上述任何格式 简单的本地数据。提供自定义源时很重要 回调以处理请求期间的错误。您必须始终调用 response 即使遇到错误也会回调。这确保了 小部件始终具有正确的状态。

为了重构你的代码，我将使用 vanilla JS filter 和 map。

请在 sn-p 下面运行以检查它是否正常工作：

function setMembers(members) {
  $('#member-search').autocomplete({
    source: function (request, response) {

      let regex = new RegExp(request.term, 'i');
      
      let recs = members
        // Filter members using request term
        .filter(({ first, last, id }) => {
          let term = `${first} ${last}`;
          return regex.test(term);
        })
        // Map to the response supported object
        .map(({ first, last, id }) => ({
          label: `${first} ${last}`,
          value: id
        }));

      console.log('recs', recs);

      response(recs);
    },
    select: function (event, ui) {
      event.preventDefault();
      $("#member-search").val(ui.item.label); 
      $("#selection").text(`"${ui.item.label}" (ID: ${ui.item.value})`);
    }
  });
}

setMembers([{
    first: 'Giorgos', last: 'Mihas', id: 1
  }, {
    first: 'Mike', last: 'Nakas', id: 2
  }, {
    first: 'Angela', last: 'Fox', id: 3
  }, {
    first: 'Maria', last: 'Pappou', id: 4
  }, {
    first: 'Vaggelis', last: 'Maggas', id: 5
  }, {
    first: 'Nikos', last: 'Stergiou', id: 6
  }, {
    first: 'Elvis', last: 'Presley', id: 7
  }
]);

h3 { font-family: monospace; }

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="ui-widget">
  <label for="tags">Members: </label>
  <input id="member-search" class="member-search">
  <h3>Selection: <span id="selection"></span></h3>
</div>