Блог

У меня есть скрипт мгновенного поиска в стиле Google, написанный на jQuery, который извлекает результаты из PHP-скрипта. Когда пользователь запрашивает что-либо, его запрос отображается в заголовке страницы как «ЗАПРОС — Мой сценарий поиска», а в URL страницы как #ЗАПРОС. Однако, когда вы удаляете весь текст из окна поиска, # все еще остается в URL, а заголовок гласит » — Мой сценарий поиска». Как я могу сделать так, чтобы после удаления всего содержимого окна поиска скрипт удалял заголовок и #?

Мой код jQuery:

 $(document).ready(function(){
    $("#search").keyup(function(){
        var search=$(this).val();
        var query=encodeURIComponent(search);
        var yt_url='search.php?q=' query 'amp;category=web';
        window.location.hash=query;
        document.title=$(this).val() " - My Search Script";

        $.ajax({
            type:"GET",
            url:yt_url,
            dataType:"html",
            success:function(response){
                $("#result").html(response);
            }
        });
    });
});
  

Вы можете привести <title> в порядок достаточно просто, но вы не сможете последовательно удалять # из URL после того, как вы установили хэш. Единственный браузер, который, кажется, избавляется от этого, — Firefox.

 $(document).ready(function(){
  $("#search").keyup(function(){
    var search=$(this).val();
    var query=encodeURIComponent(search);
    var yt_url='search.php?q=' query 'amp;category=web';
    window.location.hash=query;
    // You may want to use a better title than 'xa0' (blank)
    document.title = search=='' ? 'xa0' : search " - My Search Script";

    $.ajax({
      type:"GET",
      url:yt_url,
      dataType:"html",
      success:function(response){
        $("#result").html(response);
      }
    });
  });
});
  

Как насчет чего-то подобного:

 $(document).ready(function(){
    $("#search").keyup(function(){
        var search=$(this).val();
        var query=encodeURIComponent(search);
        var yt_url='search.php?q=' query 'amp;category=web';

        $.ajax({
            type:"GET",
            url:yt_url,
            dataType:"html",
            success:function(response){
                $("#result").html(response);
                if (query == "") {
                    window.location.hash=query;
                    document.title=$(this).val() " - My Search Script";
                } else {
                    window.location.hash=query;
                    document.title="My Search Script";
                }
            }
        });
    });
});
  

Изменения, которые я внес, следующие:

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

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

 $(document).ready(function() {
    $('#search').keyup(function() {
        var search = $(this).val();
        if(search == '') {
            window.location.hash = '';
            document.title = 'My Search Script';
            $('#result').empty();
        }
        else {
            window.location.hash = encodeURIComponent(search);
            document.title = search   ' - My Search Script';

            $.ajax({
                type: 'GET',
                url: 'search.php',
                data: {q: search, category: 'web'},
                dataType: 'html',
                success: function(response){
                    $('#result').html(response);
                }
            });
        }
    });
});
  

Я использовал data опцию $.ajax , чтобы вам не нужно было создавать URL самостоятельно.

Я не думаю, что вы можете гарантировать избавление от хэша в URL: некоторые браузеры удаляют его, другие — нет.