Поиск с подсказками

Тема в разделе "JavaScript", создана пользователем -USTAS-, 5 июн 2012.

Модераторы: ZiX
  1. -USTAS-

    -USTAS- Постоялец

    Регистр.:
    26 май 2010
    Сообщения:
    131
    Симпатии:
    4
    Бьюсь над этой проблемой уже не первый год. Но чем больше бьюсь, тем больше понимаю, что не смогу самостоятельно это реализвать - уровня необходимого нет(((
    Форумчане подскажите пожалуйста!
    Вот есть такой сайт:
    Перейти по ссылке
    На нем ОЧЕНЬ хорошо организован поиск с подсказками, как в Гугле.
    Как это можно реализовать на моем сайте. И можно ли вобще.
    Вот мой сайт:
    Перейти по ссылке
    Буду ОЧЕНЬ признателен за помощь!
     
  2. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    думаю jquery-ui autocomplete как раз то, что вы ищете... Перейти по ссылке
    к стати этот же плагин используется на сайте приведенном в пример... (исходный код строка 19)
     
  3. -USTAS-

    -USTAS- Постоялец

    Регистр.:
    26 май 2010
    Сообщения:
    131
    Симпатии:
    4
    Я видел это вариант, но там города. И все прикручено к базе городов со стороннего сайта.
    А как чтобы по моему сайту поиск велся?
     
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    делаешь выборку из бд и уже на сайте используешь jquery autocomplete

    вот здесь решение для шоп-скрипта. Переделаешь под себя
    Перейти по ссылке
     
  5. zaxap83

    zaxap83 Постоялец

    Регистр.:
    6 дек 2010
    Сообщения:
    87
    Симпатии:
    28
    Мое решение, с подсветкой совпадения:

    HTML:
    
    <script type="text/javascript">
    function lookup(inputString) {
        if(inputString.length < 3) {
            $('#suggestions').fadeOut();
        } else {
                $.post("/modules/recom/ajaxsearch.php?search="+inputString, {queryString: ""+inputString+""}, function(data) {
                $('#suggestions').fadeIn();
                $('#suggestions').html(data);
            });
        }
     
        $("input").blur(function(){
            $('#suggestions').fadeOut();
        });
    }
    </script>
    
    Сам input
    HTML:
    
    <input type="text" onkeyup="lookup(this.value);" class="search-input" id="inputString" name="cntnt01searchinput" size="20" maxlength="50" value="Поиск по сайту" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" AUTOCOMPLETE="off"/>
    
    И сам php
    PHP:
    if(isset($_GET['search']))
        {
            
    $query mysql_query("select parent_id, content_name, hierarchy_path from cms_content where content_name like '%".$_GET['search']."%' or menu_text like '%".$_GET['search']."%' order by content_name ASC");
            while(
    $row mysql_fetch_array($query))
                {
                    
    $query_par mysql_query("select content_name from cms_content where content_id ='".$row['parent_id']."'");
                    if(
    $res_par mysql_fetch_assoc($query_par))
                        {
                            
    $parrent $res_par['content_name'];         
                            
    $parrent_title '('.$parrent.')';
                        }
                    else
                        {
                            
    $parrent_title '';
                        }
             
             
             
                    
    preg_match('#'.$_GET['search'].'#isu'$row['content_name'], $matches);
                    
    $res_out preg_replace('#'.$_GET['search'].'#isu''<span style="color:#FE7E0C">'.$matches[0].'</span>'$row['content_name']);
             
                    
    $res_arr[] =  '<a class ="srch_a" href="/'.$row['hierarchy_path'].'">'.$res_out.' '.$parrent_title.'</a>';
             
             
                }
            
    $res array_unique($res_arr);
            foreach(
    $res as $a)
                    {
                        echo 
    $a;
                    }
        }

    Это полностью рабочий пример, конечный вариант можно посмотреть Перейти по ссылке (вбить в поиск что-то вроде "худож", контента там пока почти нет, поэтому и искать особо нечего)
     
  6. -USTAS-

    -USTAS- Постоялец

    Регистр.:
    26 май 2010
    Сообщения:
    131
    Симпатии:
    4
    По ссылке какой-то книжный сайт выбивает
    А по поводу кода - что куда вставлять подскажите пожалуйста
    И что делает этот код? Подсвечивает слова на странице результаов поиска или на конечной странице?
     
  7. zaxap83

    zaxap83 Постоялец

    Регистр.:
    6 дек 2010
    Сообщения:
    87
    Симпатии:
    28
    По ссылке там сайт, который сейчас довожу до ума. Там в строке поиска можно ввести "худож" и сразу станет все видно
    вот пример
    [​IMG]
    или
    [​IMG]

    скрипт вставлять в шаблон (между <head></head>), сам input соответственно там, где нужно в шаблоне чтоб была строка поиска, ну и сам php где угодно, только путь правильно указать нужно, у меня в скрипте он
    $.post("/modules/recom/ajaxsearch.php
     
  8. -USTAS-

    -USTAS- Постоялец

    Регистр.:
    26 май 2010
    Сообщения:
    131
    Симпатии:
    4
    А можно об этом пункте поподробней?
    Мне файл нужно отдельный сделать или дописать в имеющийся какой-то?
    И если последнее, после чего дописывать?
     
  9. zaxap83

    zaxap83 Постоялец

    Регистр.:
    6 дек 2010
    Сообщения:
    87
    Симпатии:
    28
    Новый конечно, только в начало файла нужно вписать подключение к базе (если файл не является модулем в движке), затем поменять выборку из базы в соответствии со своей структурой. Если нет никаких знаний по php, то самостоятельно это сделать не получится в любом случае.
     
  10. -USTAS-

    -USTAS- Постоялец

    Регистр.:
    26 май 2010
    Сообщения:
    131
    Симпатии:
    4
    Птху ты ё...
    Какая база? какой движок???
    Тут же вся фишка, что это хтмл)))