Поиск в элементах с помощью jQuery и после нажатия enter страница перенаправит на ссылку выбранного элемента

#jquery #html #search #keyup

#jquery #HTML #Поиск #ввод

Вопрос:

Я создаю плагин поиска с помощью jQuery.
Когда пользователь нажимает enter во вводе поиска после поиска элемента, мне нужна страница для перенаправления на выбранный элемент href .

 jQuery.expr[':'].contains = function (a, i, m) {
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};


jQuery(function ($) {

    $('input[name="search"]').keyup(function () {

        var searchterm = $(this).val();

        if (searchterm.length > 1) {
            var match = $('.item_name:contains("'   searchterm   '")');
            var nomatch = $('.item_name:not(:contains("'   searchterm   '"))');
            match.addClass('selected');
            nomatch.addClass('uk-hidden');

        } else {
            $('.item_name').removeClass('uk-hidden');
            $('.item_name').removeClass('selected');
        }

    });

    var statematch = $('.item_name:contains("استان")');
    statematch.remove().parent();
});  
 .uk-hidden{
    display: none;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="uk-search">
    <input class="uk-search-field" type="search" name="search" placeholder="search here">
</div>
<div class="ad-city-list">
    <div class="item_name"><a href="tehran.html">Tehran</a></div>
    <div class="item_name"><a href="istanbul.html">Istanbul</a></div>
    <div class="item_name"><a href="tabriz.html">Tabriz</a></div>
</div>  

Как я могу это сделать?

Ответ №1:

Попробуйте это:

  jQuery.expr[':'].contains = function(a,i,m){
            return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
        };


        jQuery(function($) {

            $('input[name="search"]').keyup(function(){ 

                var searchterm = $(this).val();

                if(searchterm.length >1) {
                    var match = $('.item_name:contains("'   searchterm   '")');
                    var nomatch = $('.item_name:not(:contains("'   searchterm   '"))');             
                    match.addClass('selected');
                    nomatch.addClass('uk-hidden');


                } else {
                    $('.item_name').removeClass('uk-hidden');
                    $('.item_name').removeClass('selected');                
                }

            });

            var statematch = $('.item_name:contains("استان")');
            statematch.remove().parent();


              $(document).keypress(function(e) {
                       if(e.which == 13) {
                          var url1 = $('.item_name.selected:not(.uk-hidden) a').attr('href');
                          $(window.location).attr('href', url1);
                       }
                     });
        }); 
  

Ответ №2:

Используйте приведенный ниже код.

  $('input[name="search"]').bind('keypress', function(e) {
    var code = e.keyCode || e.which;
     if(code == 13) { //Enter keycode
       var href = $(".ad-city-list").find(".selected:first").find("a:first").attr("href");
       if(href)
       window.location.href = href;
     }
}); 
  

Комментарии:

1. tnx мой друг, ваш ответ и приведенный выше ответ оба сработали для меня, но проблема в том, что он онлайн выбирает первый элемент с выбранным классом, и если некоторые элементы имеют этот класс, он не выбирает правильный элемент

2. да, поскольку мы выбираем базу по классу, в приведенном выше коде я выбираю только первый элемент. вы можете установить ограничение, например, если выделено более одного выбора, не перенаправляйте, просто попытайтесь точно сопоставить один элемент.