Question

我有一些自动完成操作的示例代码，但有没有人知道如何让自动完成列表使用页面上现有的div列表与输入输入时出现的默认自动完成下拉列表？

所以给出了一系列排序：

<div class="school-wrapper">
    <div class="sub-element">
        <div class="school-name">Ariel High</div>
        <div class="status">opened</div>
    </div>
    <div class="sub-element">
        <div class="school-name">Asta Middle</div>
        <div class="status">opened</div>
    </div>
    ...

基于上面标记的剪切，我想要完成的是：

输入结果中没有显示整个学校列表标记（全部学校名称和状态）
在输入中输入'Ari'会使包含'Asta Middle'的子元素被隐藏，包含'Ariel High'的元素将保持可见
自动完成的默认下拉行为将被禁用并隐藏实际上，元素将在子元素上完成 school-wrapper div
我基本上想弄清楚如何使用自动完成功能并将其应用于页面标记而不是使默认下拉列表显示下面的另一个列表输入。我不知道它是否可以做到这一点，但如果是这样，我正在寻找如何方向。我为它创建了源数组到目前为止自动完成。

http://jsfiddle.net/6FUam/2/

Answer 1

这里的关键因素是使用自动完成响应。至少这是一种方法。这是使这项工作的JavaScript：

$("#schools").autocomplete({
    source: schoolSource,
    minLength: 0,
    response: function(event, ui) {
        $.each(ui.content, function(){
            var label = this.label;
            $.each($('.school-name'), function(){
                if($(this).text() === label){
                    $(this).parent().addClass('show');
                }
            });
        });
        $.each($('.school-name'), function(){
            if (!$(this).parent().hasClass('show')){
                $(this).parent().removeClass('visible');
                $(this).parent().addClass('hide');
                $(this).parent().removeClass('show');
            }else{
                $(this).parent().removeClass('hide');
                $(this).parent().addClass('visible');
                $(this).parent().removeClass('show');
            }
        });
    }
});

至于我的小提琴，最终产品和答案在这里：http://jsfiddle.net/ryurage/ffdmT/

如何在HTML上使用Jquery UI AutoComplete？

1 个答案: