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

Answer 2

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

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

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

Google Custom Search

我需要有关jQuery Search输入的指导

2 个答案: