使用jQuery搜索html（自动完成）-Java 学习之路

我有一堆隐藏的div，里面有一张 table . 用户需要在第一个单元格中搜索名称（可以包含空格），然后返回div ID .
我查看了jQueryUI自动完成插件，但是在使用多个值时遇到了问题 . 插件docs和demos .
我使用"Custom data and display"示例作为预定义数据数组的基础，但我想避免使用它，只需使用选择器 .

Search box

<label for="search_name">Find name</label>
<input type="text" name="search_name" value="" id="search_name">
<span style="display:none;" id="search_result"></span>

Divs

<div id="name_101284"><table>
  <tr><th colspan="5">John Doe (<a href="http://link">text</a>) - snip</th></tr>
  <tr><th>C1</th><th>C2</th><th>C3</th><th>C4</th><th>C5</th></tr>
  <tr><td>snip
</table></div>

var nameAC = [
   {label:"John Doe",id:"101284"},
   {label:"Johnny",id:"152345"},
   {label:"Jim Nelson",id:"77344"},
   {label:"Jimmy",id:"87457"},
   {label:"Maria",id:"100934"},
   {label:"Maria Nelson",id:"94734"},
   {label:"Jane Doe",id:"86247"},
   {label:"Janet",id:"106588"}
  ];
  $('#search_name').autocomplete({
    minLength: 1,
    delay: 300,
    source: nameAC,
    focus: function(event, ui) {
      $('#search_name').val(ui.item.label);
      return false;
    },
    select: function(event, ui) {
      $('#search_result').text(ui.item.id);
      $('#search_result').show();
    }
  });

属性“label”是包含用于填充下拉结果UL的值的预期名称 . 更改它需要覆盖默认的_renderItem方法，如下所示

$('#search_name').autocomplete({
 stuff
})
.data("autocomplete")._renderItem = function(ul, item) {
  return $("<li></li>")
  .data("item.autocomplete", item)
  .append("<a>" + item.name + "</a>")
  .appendTo(ul);
};

但它似乎有缺陷 .

我可以创建选择器（或回调函数）以避免必须创建nameAC数组吗？

1 回答

2
金，我认为你这样做的方式非常可靠 . 如果你想拥有一个函数生成的源代码，我建议你更容易解析你的数据，即在每个div中的名字周围放一个span标签 .

话虽如此，这是现在使用您的数据的一种方法 . 这可能不完美，因此我的建议是：
```
function makeArray() {
    var results = [];
    $("div[id^='name_']").each(function() {
        results.push({
            'label': $(this).find('th:first').text().replace(/(.*) \(.*/, '$1'),
            'id': this.id.replace(/name_(\d+)/, '$1')
        });
    });
    return results;
}
```
显然，如果您的用户名是这样的： <span class="name">John Doe</span> ，那么标签会更容易： $(this).find('span.name').text()

您可以在此处看到此操作的简单版本：http://jsfiddle.net/ryleyb/MYCbX/

EDIT ：我应该提到过，这是从自动完成中调用的，如下所示：
```
$('#search_name').autocomplete({
    source: makeArray() // <-- note the brackets, function is being **called** 
});
```
回复于 2024-05-03T15:06:42+08:00

使用jQuery搜索html（自动完成）

1 回答

相关问题