02.09.2010, 18:50
|
|
Кандидат Javascript-наук
|
|
Регистрация: 23.08.2010
Сообщений: 123
|
|
|
Автозавершение набора текста.
Здравствуйте, подскажите с чего начать, нужно сделать следующее:
Есть список, к примеру, городов. Выводим его в <select>. Как сделать, что б в момент набора названия города в селекте скрипт искал совпадения по маске и автозавершал набор. Ну потипу начинаешь набирать "Новос.." скрипт подсказывает "Новосибирск".
|
|
02.09.2010, 19:05
|
|
Профессор
|
|
Регистрация: 21.01.2010
Сообщений: 1,022
|
|
<html><head><title>Test</title></head><body>
<input type="text" id="foo" />
<select id="city">
<option>
Москва
</option>
<option>
Санкт-Петербург
</option>
<option>
Новосибирск
</option>
<option>
Красноярск
</option>
<option>
Самара
</option>
<option>
Нижний Новгород
</option>
<option>
Урюпинск
</option>
<option>
Хабаровск
</option>
<option>
Владивосток
</option>
</select>
<script type="text/javascript">
document.getElementById( 'foo' ).onkeypress = function () {
var sel = document.getElementById( 'city' ).getElementsByTagName( 'option' );
for ( var i = 0; i < sel.length; i++ ) {
if ( this.value.length && sel[i].value.indexOf( this.value ) === 0 ) document.getElementById( 'city' ).selectedIndex = i;
}
}
</script>
</body></html>
|
|
02.09.2010, 21:24
|
|
Кандидат Javascript-наук
|
|
Регистрация: 23.08.2010
Сообщений: 123
|
|
|
Спасибо!
А возможно изменить скрипт, что б результат выводился не в селекте, а в инпуте, где, собсно, и текст вводим ?
|
|
03.09.2010, 08:14
|
|
Профессор
|
|
Регистрация: 21.01.2010
Сообщений: 1,022
|
|
<html><head><title>Test</title></head><body>
<input type="text" id="foo" />
<select id="city">
<option>
Москва
</option>
<option>
Санкт-Петербург
</option>
<option>
Новосибирск
</option>
<option>
Красноярск
</option>
<option>
Самара
</option>
<option>
Нижний Новгород
</option>
<option>
Урюпинск
</option>
<option>
Хабаровск
</option>
<option>
Владивосток
</option>
</select>
<script type="text/javascript">
document.getElementById( 'foo' ).onkeypress = function () {
var sel = document.getElementById( 'city' ).getElementsByTagName( 'option' );
for ( var i = 0; i < sel.length; i++ ) {
if ( this.value.length && sel[i].value.indexOf( this.value ) === 0 ) this.value = sel[i].value;
}
}
</script>
</body></html>
Только это не совсем удобно будет. Например, если мы хотим набрать "Нижний Новгород", то после ввода буквы "Н" в поле запишется "Новосибирск". |
|
03.09.2010, 09:58
|
|
Новичок
|
|
Регистрация: 03.08.2010
Сообщений: 230
|
|
|
Тогда надо выводить только когда по такой подстроке всего одно значение. Например, не сразу присваивать значение sel[i].value, а добавлять его в массив, в последующем проверяя его длину, и если длина массива с найденными совпадениями = 1 то выводить единственный элемент массива в инпут.
__________________
Не хочешь, чтобы тебя послали? Не спрашивай куда идти. 
|
|
04.09.2010, 19:04
|
|
Кандидат Javascript-наук
|
|
Регистрация: 23.08.2010
Сообщений: 123
|
|
|
exec, спасибо большое)
inGray, а как это в виде кода будет выглядеть ?
|
|
04.09.2010, 19:12
|
|
Профессор
|
|
Регистрация: 21.01.2010
Сообщений: 1,022
|
|
<html><head><title>Test</title></head><body>
<input type="text" id="foo" />
<select id="city">
<option>
Москва
</option>
<option>
Санкт-Петербург
</option>
<option>
Новосибирск
</option>
<option>
Красноярск
</option>
<option>
Самара
</option>
<option>
Нижний Новгород
</option>
<option>
Урюпинск
</option>
<option>
Хабаровск
</option>
<option>
Владивосток
</option>
</select>
<script type="text/javascript">
document.getElementById( 'foo' ).onkeypress = function () {
var sel = document.getElementById( 'city' ).getElementsByTagName( 'option' ),
city = '', find = 0;
for ( var i = 0; i < sel.length; i++ ) {
if ( this.value.length && sel[i].value.indexOf( this.value ) === 0 ) city = sel[i].value, find++;
}
if ( find === 1 ) this.value = city;
}
</script>
</body></html>
|
|
04.09.2010, 20:08
|
|
Кандидат Javascript-наук
|
|
Регистрация: 23.08.2010
Сообщений: 123
|
|
exec, супер, но только сейчас заметил, что твой скрипт не дает ничего стирать в инпуте (клавишей Backspace) 
Еще небольшой баг: 4я введенная буква вылазит в конце названия города. Т.е. пишу к примеру "Санк.." Скрипт выдает "Санкт-Петербургк". С чем это связано непонятно, может внутрений скрипт "примеров" глючит ?
|
|
04.09.2010, 20:15
|
|
Новичок
|
|
Регистрация: 03.08.2010
Сообщений: 230
|
|
 Так действительно эффективнее, до тех пор пока не нужно подсказку из вариантов выводить.
__________________
Не хочешь, чтобы тебя послали? Не спрашивай куда идти.
|
|
04.09.2010, 20:29
|
|
Профессор
|
|
Регистрация: 21.01.2010
Сообщений: 1,022
|
|
Чуть поправил.
<html><head><title>Test</title></head><body>
<input type="text" id="foo" />
<select id="city">
<option>
Москва
</option>
<option>
Санкт-Петербург
</option>
<option>
Новосибирск
</option>
<option>
Красноярск
</option>
<option>
Самара
</option>
<option>
Нижний Новгород
</option>
<option>
Урюпинск
</option>
<option>
Хабаровск
</option>
<option>
Владивосток
</option>
</select>
<script type="text/javascript">
document.getElementById( 'foo' ).onkeypress = function ( e ) {
if ( (e = e || window.event).keyCode !== 8 ) {
var sel = document.getElementById( 'city' ).getElementsByTagName( 'option' ),
city = '', find = 0;
for ( var i = 0; i < sel.length; i++ ) {
if ( this.value.length && sel[i].value.indexOf( this.value ) === 0 ) city = sel[i].value, find++;
}
if ( find === 1 ) this.value = city, e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
}
</script>
</body></html>
|
|
|
|
