Страница 2 из 3

Re: автозаполнение

СообщениеДобавлено: 13 авг 2012, 13:22
bubanay
Генадий, без вас не справлюсь. /2011/700.html по этому уроку я и делал. Схемотично вышло вот так:

Код: выделить все
<HEAD>
      <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
      <script type="text/javascript">
         $(function(){

            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
               function() { $(this).addClass('ui-state-hover'); },
               function() { $(this).removeClass('ui-state-hover'); }
            );
         });
      </script>
      </HEAD>
<body>
<form method="POST">
     <input id="city" type="text" name="test" />
</form>
   <style>

   input{
      border:1px solid #999999;
      width:200px;   
   }   
   
   select{
      border:1px solid #999999;
      width:200px;   
   }

   

</style>
              <script type="text/javascript">

     $(function(){

       var availableTags = [
       <?php
       foreach($city as $k=>$v)
       {
  echo "\"".trim($v)."\", ";
       }
       ?>
       ];
       $("#city").autocomplete({
         source: availableTags,
       });
     });
     </script>
</body>


Так и не понял почему minLength должен быть 1, он по умолчанию и так 1, пробовал поставить его 0, что бы для вывода подсказки не нужен был ввод символов, не помогло.

Пробовал в последний скрипт помещать
Код: выделить все
$('#city').focus(function(){
    alert('Фокус!');
});

Но тут наверняка вместо Фокус! идут какая-то хитрость. Я понимаю что эта задача с практически нулевой сложностью исполнения, но мне пока так и не удалось подстроить код. Не могли бы вы мне добавить в этот код недостающие дитали?

Re: автозаполнение

СообщениеДобавлено: 13 авг 2012, 16:54
Gennady
Что-то вроде этого http://jsfiddle.net/Gennady/bUKzQ/
Для примера взят список городов России - 1109 штук.

Re: автозаполнение

СообщениеДобавлено: 14 авг 2012, 12:12
bubanay
Изображение

До итога осталось сделать эффект закругленной рамочки при наведении и угадать межстрочный отступ. В css файле используется только line-height:1.3 и 1.5, но что-то они мне ячейку не раздвигают(в пикселях, раздвигают, но хотелось бы сделать одинакого).

Какой стиль нужно задать <a> что бы получить выделение города при наведении?

Re: автозаполнение

СообщениеДобавлено: 14 авг 2012, 15:01
bubanay
Gennady писал(а):Что-то вроде этого http://jsfiddle.net/Gennady/bUKzQ/
Для примера взят список городов России - 1109 штук.


Этот код не работает не в 1 IE. Ругается на запятую в самом низу после tags
Код: выделить все
$('#city').focus(function(){
    $('#list').css({ "display":"block" });
}).keyup(function(){
    $('#list').css({ "display":"none" });
});
$('#list li').click(function(){
    $('#city').val($(this).text());
    $('#list').css({ "display":"none" });
});   

$("#city").autocomplete({
    source: tags,
});


Если ее убрать то работает, но список смещается вправо
Изображение
Как на IE заставить список быть на совем месте (подсказка там где нужно)?

Re: автозаполнение

СообщениеДобавлено: 14 авг 2012, 15:53
bubanay
Нашел еще 1 косяк, весь день не замечал.
Вариант 1. Жму на поле, появляется весь список, тыркаю на город, он прописывается, заполняем форму дальше.

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

Скорее всего изначально появляется список, потом поверх него подсказка, потом подсказка уберается, а список остается. Этого можно избежать?

Re: автозаполнение

СообщениеДобавлено: 14 авг 2012, 17:13
bubanay
вопрос с наложением списков решил, остался последний штрих, заставить в IE отображать список на своем месте. И почему-то в ие на нем не работает подсветка при наведении. А в подсказке работает ...

Re: автозаполнение

СообщениеДобавлено: 14 авг 2012, 21:50
Gennady
bubanay писал(а):Этот код не работает не в 1 IE. Ругается на запятую в самом низу после tags

Да, конечно, запятой там в конце строки быть не должно.
bubanay писал(а):И почему-то в ие на нем не работает подсветка при наведении. А в подсказке работает

Это уже css. Посмотрите, какие стили используются в самом autocomplete, попробуйте применить их для своего списка.

Как совет, обязательно используйте какой-либо отладчик.... Мне нравится FireBug для FF, но впрочем это дело вкуса. Просто с отладчиком Вы не будете "вслепую" работать.

Re: автозаполнение

СообщениеДобавлено: 14 авг 2012, 22:06
bubanay
сегодняшний день и провел в поиске нужных стилей для ie, фаер багом смотреть не удается, пото что список закрывается при попытке посмотреть элемент, а в коде, списка подсказки нет, без понятия какие стили применялись к подсказке. А в css листе более 350 строк). Вы не помните приимерно какими стилями можно задвинуть этот список наместо в ie? По идее это должно применяться к ul.

Re: автозаполнение

СообщениеДобавлено: 15 авг 2012, 21:54
Gennady
bubanay писал(а):фаер багом смотреть не удается

В Google Chrome щелкаете на элементе правой кнопкой мыши и выбираете "Просмотр кода элемента"... Справа смотрите css-правила для выбранного элемента.

Re: автозаполнение

СообщениеДобавлено: 02 окт 2012, 15:31
bubanay
Gennady писал(а):В Вашем варианте используется источник данных на клиенте... Здесь по первому символу поиск у Вас не получится. Готовьте данные на сервере и получайте их запросом, тогда, в зависимости от того, как будет написан серверный скрипт, можно искать как угодно... Хоть по начальным буквам слова, хоть по его окончанию.


Клиент наконец-то обдумал и решил что поиск он хочет видеть по первым символам, а не по слову в целом. Не могли бы вы поподробнее описать процесс приготовления данных на сервере, их получению и возможности прикрутить это в автокомплит. Может посоветуете что нибудь почитать?