我需要有关 jQuery 搜索输入的指导答案

【问题标题】：I need guidance on jQuery Search input我需要有关 jQuery 搜索输入的指导
【发布时间】：2012-02-27 20:32:59
【问题描述】：

我正在尝试在我的页面上添加一个搜索字段来搜索整个页面。我是参考

http://jquerymobile.com/demos/1.0.1/docs/forms/search/index.html

我无法理解这一点。知道如何使用它的人可以解释一下我如何在我的移动应用上使用搜索输入。

不确定如何设置 js 方法来触发搜索等。

感谢您的宝贵时间。

【问题讨论】：

标签： jquery search jquery-mobile

【解决方案1】：

//wait for our page to be created by jQuery Mobile
$(document).delegate('#page-id', 'pageinit', function () {

    //cache the elements we want to show/hide based on the search input
    var $filterDivs = $('.filter-div');

    //bind an event handler to the search input for when it's value changes
    $('#search').bind('keyup change', function () {

        //if the value of the input is nothing, then show all the elements
        if (this.value == '') {
            $filterDivs.slideDown(500);

        //otherwise find only the elements that match what's in the search input
        } else {

            //create a regular expression based on the value of the search input
            var regxp = new RegExp(this.value),

                //get only the elements that match the search term(s)
                $show = $filterDivs.filter(function () {
                    return ($(this).attr('data-filter').search(regxp) > -1);
                });

            //hide the elements that do not match
            $filterDivs.not($show).slideUp(500);

            //and show the elements that do match
            $show.slideDown(500);
        }
    });
});

演示：http://jsfiddle.net/jasper/cZW5r/1/

这是它使用的基本 HTML 结构：

    <div data-role="fieldcontain">
        <label for="search">Search Input:</label>
        <input type="search" name="password" id="search" value="" />
    </div>
    <div class="filter-div" data-filter="one">1</div>
    <div class="filter-div" data-filter="two">2</div>
    <div class="filter-div" data-filter="three">3</div>
    <div class="filter-div" data-filter="four">4</div>
    <div class="filter-div" data-filter="five">5</div>

注意data-filter 属性，这些是根据搜索词检查的属性。

【讨论】：

【解决方案2】：

该链接仅向您展示如何设置搜索输入文本框。进行实际搜索是您需要自己编程的事情。没有真正的 JavaScript 解决方案来搜索您网站的每个页面。您可以设置一个 JavaScript 解决方案来搜索您网站的单个页面，但这可能不是您想要做的。

您可能想查看其中一些链接以了解搜索解决方案：

How to setup a simple site search for a simple website?

Google Custom Search

【讨论】：