Мне нужно руководство по вводу в jQuery Search - PullRequest
Новая
       5

Мне нужно руководство по вводу в jQuery Search

2 голосов
/ 28 февраля 2012

Я пытаюсь добавить поле поиска на своей странице для поиска по всей странице.Я ссылаюсь

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

, и я не могу понять это.Может кто-то, кто знает, как использовать это, пожалуйста, объясните, как я могу использовать поисковый ввод в моем мобильном приложении.

не уверен, как настроить метод js для запуска поиска и т.д ..

Спасибо за ваше время.

Ответы [ 2 ]

4 голосов
/ 28 февраля 2012 
//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, это атрибуты, которые проверяются по критерию (ам) поиска.

1 голос
/ 28 февраля 2012

Эта ссылка показывает только, как настроить текстовое поле для ввода поиска.Выполнение реального поиска - это то, что вам нужно запрограммировать самостоятельно.На самом деле не существует JavaScript-решения для поиска на каждой странице вашего сайта.Вы можете настроить решение JavaScript для поиска на одной странице вашего сайта, но это, вероятно, не то, что вы хотите сделать.

Возможно, вы захотите взглянуть на некоторые из этих ссылок, чтобы увидеть решения для поиска:

Как настроить простой поиск по сайту для простого веб-сайта?

Пользовательский поиск Google

...