0

我有一些自动完成的示例代码，但有谁知道我如何使自动完成列表使用页面上现有的 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/

4

1 回答 1

0

这里的关键因素是使用自动完成响应。至少这是一种方法。这是使这项工作起作用的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/

于 2013-07-23T22:29:43.947 回答