jquery - 我需要有关 jQuery 搜索输入的指导

Question

我正在尝试在我的页面上添加搜索字段以搜索整个页面。我正在引用

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

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

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

感谢您的宝贵时间。

Answer 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 属性，这些属性是根据搜索词进行检查的属性。