javascript - 如何获取 HTML 中的文本和 href 值，然后将它们设置为 JQuery UI 自动完成中的值和标签

Question

目前我明白了

JS

$(function() {
$("#nav-list123").fadeOut();
$('input').autocomplete({
    source: function(req, response) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var sources = $('.search').select ('li'); 
        response($.grep(sources.text(), function(item){return matcher.test(item.label); }) );
    },
    select: function(event, ui) {
        $('#state_id').val(ui.item.label);
        $('#abbrev').val(ui.item.value);
    }
});});

在此 html 中

<div><form class="form-search"><input id="autocomplete" type="text"/></form>
<div id="nav-list123">                   
    <ul class="search">
    <li><a href="/order_gen/address/1/">  Kitchen Visions</a></li>
    <li><a href="/order_gen/address/4/">  Full Name</a></li>
    <li><a href="/order_gen/address/23/">  Job B</a></li>
    </ul>
</div>

我想获取 <li> 中的元素属性，我尝试使用 .text()或.html()获取文本，但我不知道如何将这些属性转换为 JQuery UI 自动完成函数中的标签和值以获取匹配元素。

有人可以帮助我吗？谢谢

Answer 1

您应该在页面加载时将 ul li 的值和 href 存储到 JavaScript 数组中
& 在自动完成源中传递此数组

var arr = new Array();
$('ul > li').each(function(){
var temp_obj = {
标签:$(this).children('a').attr('href'),
值:$(this).children('a').text().trim()
}
arr.push(temp_obj);
});

//在自动完成源中传递此数组
$('输入').autocomplete({
焦点:函数(事件，ui){
$( "#your_id").val( ui.item.value );
返回错误；
},
来源:arr
});