Question

尝试根据jQuery UI自动完成搜索过滤掉页面上的内容。当用户输入与搜索无关的内容时，将切换到display：none; 所以只显示与搜索相关的内容。

HTML

        <div class="items" data-id="Get Milk">Get Milk on the way home</div>
        <div class="items" data-id="Drop by Phil's">Drop by Phils house</div>
        <div class="items" data-id="Grab a Sandwich">Grab a sandwich</div>

<input id="auto" type="text" />

的Javascript

$(function () {
    var source = $(".items").map(function () {
        return $(this).data("id");
    }).get();

    $("#auto").autocomplete({
        source: source        
    });
});

尝试

$(document).ready(function () {

    var search = $("#auto").html();
    var results = $(".items").html();

    if (search == results) {
        $(".items").css("display", "block");
    } 
    else {
        $(".items").css("display", "none");
    }

});

现在我明白我需要参考个别的“项目”，这也需要揭开神秘面纱。 jsfiddle：http://jsfiddle.net/J5rVP/25/ 友情提供者Andrew Whitaker，来自bit.ly/U1gjr2

Answer 1

好的，首先要了解你正在处理jQueryUI Widget。它们非常好且可扩展，但您必须深入了解文档以确保您了解它们的工作原理。

当您启动自动填充功能时，您需要提供一个响应功能，您可以在其中检查匹配并隐藏（如果需要）。像这样：

$("#auto").autocomplete({
    source: source,
    response: function(event, ui){
        if(ui.content.length == 0)
            alert("nothing");
        else
           alert(ui.content.length + " items");
    }
});

最后，请仔细阅读自动填充文档。你将在那里学到很多关于jQuery UI API的知识。

http://api.jqueryui.com/autocomplete/

使用Jquery UI过滤页面内容

1 个答案: