Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Подсказка для текстового поля


Автор: LordZeus 26.11.2008, 16:47
Здравствуйте Все!
У меня появилась одна идея и я не знаю как ее реализовать...
Суть вот в чем:
есть текстовое поле ... и хотелось бы после ввода очередного символа - выводить подсказку со списком текстовых строк из базы данных, которые начинаются на введенный текст(с тех же символов, что и в текстовом поле). 

Наверно это очень тривиальная задача...потому как я ее на форуме не нашел..но мне она показалась достаточно сложной. 

Может ли мне кто-нибудь помочь с этим?

заранее спасибо!!  smile 

Автор: bars80080 26.11.2008, 17:13
отнюдь не тривиальная задача, это во-первых.
если ты подгружаешь список из БД во время ввода, то надо почитать про ajax
помимо этого, само текстовое поле по сути будет мини-визивиг редактором, его придётся подменить
в-четвёртых, матюкаясь в очередной раз с яндекса, который включил эту систему у себя, хочу заметить, что красиво - не значит полезно. эта штука не идеально установленная не позволяет легко и быстро вводить текст, заставляя курсор туда-сюда бегать

Добавлено через 1 минуту и 56 секунд
и в-пятых, советую не ломать другим глаза. тебе очень нравится цвет твоего текста? а о юзабилити не задумывался?

Автор: LordZeus 26.11.2008, 17:21
bars80080,  Нет, в задаче есть возможность выбрать из базы все заранее... нужен просто метод, при котором вводимый текст будет обрабатываться в процедуре, которая оперирует скажем массивом данных.

Автор: Michael.de 27.11.2008, 01:46
Цитата(LordZeus @  26.11.2008,  17:21 Найти цитируемый пост)
...Нет, в задаче есть возможность выбрать из базы все заранее...
imho: не экономное решение + при большом массиве будет тяжело искать.
Решить можно так: внутри формы считывается введённое юзером значение и в цикле сравнивается с началом каждого элемента. Использовать можно методы indexOf() или search() объекта String. Всё, что нашлось, выдаёшь рядом в комбобоксе. Поменял (дописал, стёр) юзер что-то в поле ввода - всё делаешь заново.

P.S. 
Цитата(bars80080 @  26.11.2008,  17:13 Найти цитируемый пост)
помимо этого, само текстовое поле по сути будет мини-визивиг редактором
а почему wysiwyg? или я вопрос неправильно понял...

Автор: bars80080 27.11.2008, 10:31
Цитата(Michael.de @  27.11.2008,  00:46 Найти цитируемый пост)
Всё, что нашлось, выдаёшь рядом в комбобоксе

ну, так то да, никакого визивиг. но я имел ввиду такую же фишку, как в яндексе. там ведь падающий список прилипает к строке и с него легко перелодится на список кнопками клавиатуры. хотя, не разбирался, может там просто регистрируют нажатия кнопок, а затем выделяют тот или иной пункт списке...
в общем, тяжёлая вещь

Автор: LordZeus 27.11.2008, 12:19
Michael.de,  На самом деле я это прекрасно понимаю,  и по этому пишу, что есть такая возможность... потому, что выборка будет вестись из массива 20-30 элементами...ну точно не больше 50 шт. 
Хотя с  другой стороны - нужно делать модуль, который можно будет воткнуть куда угодно...  smile

Поломаю сегодня мозг....спасибо за ответы... обязательно сообщу о результатах...  smile 

Автор: Michael.de 29.11.2008, 00:58
LordZeus, может пригодится:
Код

<html>
<head>
<script type='text/javascript'>
var field, array;
function init(){
 field=document.getElementById('f');
 array=[
  'Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut',
  'Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa',
  'Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan',
  'Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire',
  'New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio',
  'Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota',
  'Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia',
  'Wisconsin','Wyoming'
 ];
}

// Функция использует массив 'array' и значение input-а 'field'.
// Возвращает список элементов, начинающихся со значения input-а.
function getList(){
 var ret=[], text=field.value, i;
 for (i=0; i<array.length; i++){
  if (array[i].substr(0,text.length).toLowerCase() == text.toLowerCase()){
   ret.push(array[i]);
  }
 }
 // <-- This part of the code is not needed. Only to check. //////////////////////////////
 var show='Full array:\n';
 for (i=0; i<array.length; i++) {show+='\"'+array[i]+'\"'; (i+1)%5?show+=', ':show+='\n';}
 show+='\nFind:\n'; for (i=0; i<ret.length; i++) show+='"'+ret[i]+'"  '; alert(show);
 ////////////////////////////// This part of the code is not needed. Only to check. --> //
 return ret;
}
</script>
</head>
<body onload='init();'>
<input id='f' onkeyup='getList();' style='background-color:#EEF; border:1px solid #00A'>
</body>
</html>
Строчки 28-32 написаны только для проверки. Вся логика - строки 23-27 (ничего сложного). smile

bars80080, специально запустил Яндекс (обычно - Google smile) - у них там менюшка с фиксир. количеством вариантов выскакивает... но её ещё делать надо smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)