jquery - 将 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 函数进行填充。 jquery.grep像filter方法，需要一个 bool 返回值，而不是像您返回的字符串。 jQuery UI autocomplete source选项函数 response 可以返回一个字符串数组 ([ "Choice1", "Choice2"]) 或一个带有 label 和 值属性([{标签:“选择1”，值:“值1”}，...])。

Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete, including JSONP. The callback gets two arguments:

• A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
• A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

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

请运行以下代码片段以检查其是否正常工作:

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>