сделать input с выпадающим списком

[Dioni$$]

Здравствуйте.

Подскажите пожалуйста как сделана форма на http://www.godo.com.au/.

Конкретно поля с выпадающим списком.

Может кто видел туториалы или подскажет куда копать. Вобщем благодарен буду за любую инфу.

Заранее спасибо за помощь

[sammasati]

Так, а что там думать? Открываешь firebug и смотришь. Там создан невидимый блок с выпадающим списком, который показывается джаваскриптом при фокусе на инпуте.

[buddah]

Самый элементарный пример: http://jsfiddle.net/vk6Hv/1/

Хотя навряд ли поможет без знания всего остального.

На счет "туториалов" - учи jQuery или чистый js.

В твоем примере просто скопипастить навряд ли получится, так как он затрагивает не одну тему.

Объясню свою мысль: даже в таком элементарном примере, как мой, на пару строчек нужно было знать:

- обёртки jQuery

- события

- bind

- focusin focusout

- Воздействие на css с помощью jQuery

- что такое функция

А у тебя еще сложнее. Намного.

Теперь понятно почему туториалы не катят?

[sigma77]

buddah,

Не, самый элементарный - http://htmlbook.ru/html/input/list

Но не кроссбраузерный

п.с. А так гугли по autocomplete

Edited June 22, 2012 by sigma77

[Dioni$$]

buddah спасибо - почти то что нужно. А как еще сделать чтобы там пункты выбирать и они в поле забивались? Просто в квери я пока что дуб )))

Edited June 22, 2012 by Dioni$$

[Avalon4eg]

$('то на чем кликае ').click(function(){
    $('input').val('значение которое надо передать в инпут')
})

[Dioni$$]

$('то на чем кликае ').click(function(){
    $('input').val('значение которое надо передать в инпут')
})

А можно это как-то автоматизировать?

Скажем у нас там список в выпадающем диве

<ul>

<li>first</li>

<li>second</li>

<li>other</li>

</ul>

так вот чтоб при клике по first - он забивался в инпут

[Avalon4eg]

$(ul li).click(function(){
    $('input').val(this.text())
})

как то так.

но для уверенности инпуту и элементам которые находятся в выпадающем диве лучше Id и класыы позадавать

[Dioni$$]

$(ul li).click(function(){
    $('input').val(this.text())
})

как то так.

но для уверенности инпуту и элементам которые находятся в выпадающем диве лучше Id и класыы позадавать

добавил этот код в пример buddah - не пашет. чет я не так делаю

[Avalon4eg]

html

<input type="text" value="Кликни сюда">
<div>
  <ul>
 <li>first</li>
 <li>second</li>
 <li>other</li>
 </ul>
</div>

js

$('input').focus(function(){
    $('div').show()
})
$('div ul li').click(function(e){

    $('input').val( $(this).text() )
    $  ('div').hide()        
})        

http://jsfiddle.net/vk6Hv/5/

Edited June 22, 2012 by Avalon4eg

[mishka]

Вы таким образом из инпута сделаете подобие селекта.

Вобщем негодится такое решение, оно слишком сырое.

Или используйте готовое решение (http://jqueryui.com/demos/autocomplete/ (на русском подробное описание http://www.linkexchanger.su/2011/700.html)

Или допиливайте сами до схожего ф-ционала.

[Avalon4eg]

кстати проскакивала мысль а почему бы не использовать select?

[buddah]

Вы таким образом из инпута сделаете подобие селекта.

Ну так в примере так и было) Инпуто-селект)