Автозаполнение Input и ввод значений
Добрый день!
исходники - http://ruseller.com/lessons/les763/demo/demo_2.html Хотел немного доработать - сделать своего рода фильтр. Рядом с формой добавить несколько ключевых слов. Т.е пользователь кликает по ним и они автоматически добавляются в форму, таблица автоматически сортирует. реализация: <script type="text/javascript"> function clickMe(el) { document.getElementById('filter').value = el.title; } </script> 'filter' - id Но проблема в том что после добавления значения в форму скрипт требует действий от пользователя - установки курсора и нажатия enter. Как сделать чтобы это происходило сразу? Весь код: <script type="text/javascript"> function clickMe(el) { document.getElementById('filter').value = el.title; } </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="filter.js"></script> <script type="text/javascript"> $(document).ready(function() { $('ul.live_filter').liveFilter('fade'); }); </script> <a href="#" title="webmoney" onClick="clickMe(this); return false;">webmoney</a> <a href="#" title="Shawshank" onClick="clickMe(this); return false;">Shawshank</a> <a href="#" title="d" onClick="clickMe(this); return false;">d</a> <input id="filter" class="filter" name="livefilter" type="text" /> <ul class="live_filter"> <li><a href="#">The Shawshank Redemption (1994)</a></li> <li><a href="#">The Godfather (1972)</a></li> <li><a href="#">The Godfather: Part II (1974)</a></li> <li><a href="#">Il buono, il brutto, il cattivo. (1966)</a></li> <li><a href="#">Pulp Fiction (1994)</a></li> <li><a href="#">The Dark Knight (2008)</a></li> <li><a href="#">Schindler's List (1993)</a></li> <li><a href="#">One Flew Over the Cuckoo's Nest (1975)</a></li> <li><a href="#">12 Angry Men (1957)</a></li> <li><a href="#">The Empire Strikes Back (1980)</a></li> <li><a href="#">Casablanca (1942)</a></li> <li><a href="#">Star Wars (1977)</a></li> <li><a href="#">Shichinin no samurai (1954)</a></li> <li><a href="#">LotR: The Return of the King (2003)</a></li> <li><a href="#">Goodfellas (1990)</a></li> <li><a href="#">Rear Window (1954)</a></li> <li><a href="#">Cidade de Deus (2002)</a></li> <li><a href="#">Raiders of the Lost Ark (1981)</a></li> <li><a href="#">C'era una volta il West (1968)</a></li> <li><a href="#">LotR: The Fellowship of the Ring (2001)</a></li> <li><a href="#">Fight Club (1999</a></li> <li><a href="#">The Usual Suspects (1995)</a></li> <li><a href="#">Psycho (1960)</a></li> <li><a href="#">The Silence of the Lambs (1991)</a></li> <li><a href="#">Sunset Blvd.(1950)</a></li> <li><a href="#">Dr. Strangelove (1964)</a></li> <li><a href="#">The Matrix (1999)</a></li> <li><a href="#">Momento (2000)</a></li> <li><a href="#">North by Northwest (1959)</a></li> <li><a href="#">It's a Wonderful Life (1946)</a></li> <li><a href="#">Citizen Kane (1941)</a></li> <li><a href="#">Se7en (1995)</a></li> <li><a href="#">LotR: The Two Towers (2002)</a></li> <li><a href="#">Léon (1994)</a></li> <li><a href="#">Apocalypse Now (1979)</a></li> <li><a href="#">American Beauty (1999)</a></li> <li><a href="#">Taxi Driver (1976)</a></li> <li><a href="#">American History X (1998)</a></li> <li><a href="#">Lawrence of Arabia (1962)</a></li> <li><a href="#">Vertigo (1958)</a></li> <li><a href="#">WALL·E (2008)</a></li> <li><a href="#">Forrest Gump (1994)</a></li> <li><a href="#">Paths of Glory (1957)</a></li> <li><a href="#">Le fabuleux destin d'Amélie Poulain (2001)</a></li> <li><a href="#">M (1931)</a></li> <li><a href="#">Double Indemnity (1944)</a></li> <li><a href="#">To Kill a Mockingbird (1962)</a></li> <li><a href="#">Alien (1979)</a></li> <li><a href="#">A Clockwork Orange (1971)</a></li> <li><a href="#">The Treasure of the Sierra Madre (1948)</a></li> </ul> |
Цитата:
Цитата:
|
Цитата:
Цитата:
|
Цитата:
Форма, в моем понимании, это <form> ... </form> Цитата:
|
Цитата:
поставить курсор в поле input Цитата:
Наверное надо сюда (функция которая берет титлы ссылок <a> и кидает их в поле <input> с id="Filter"): <script type="text/javascript"> function clickMe(el) { document.getElementById('filter').value = el.title; } </script> Добавить функцию типа apply, enter или что-то подобное.. Сделал бы но знаний нет совсем... |
попробуй
function clickMe(el) { var $filter = $('#filter'); $filter.val(el.title); $filter.focus(); var e = jQuery.Event("keydown"); e.which = 13; $filter.trigger(e); } |
jsru_,
Спасибо за ответ! Попробовал - Title ссылки отправляется в <input> и появляется мигающий курсор: ![]() Но сортировка происходит только после нажатия "enter" или других действий. Как сделать чтобы все происходило сразу без участия пользователя? |
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> </head> <body > <form method="post" > <input id="filter" style="width: 216px; height: 20px;"> <span onclick="clickMe(this)" title="крутой title">Нажми меня</span><br> </form> <script type="text/javascript"> var $filter = $('#filter'); function clickMe(el) { $filter.val(el.title); $filter.focus(); var e = jQuery.Event("keydown"); e.which= 13; $filter.trigger(e); } $filter.keydown(function(e){ alert('Номер нажатой клавиши: ' + e.which) }); </script> </body> </html> |
Работает. Но это не то что нужно...
Всем спасибо за ответы. |
Добавил кнопку "поиск"
<form> <input type="text" id="filter" class="filter"> <input id="filter" class="filter" type="submit" value="Поиск"> <input value="Очистить"> </form> Как связать кнопку с поиском? Сейчас при нажатии на кнопку - перезагрузка страницы и снова пустое поле(( |
Часовой пояс GMT +3, время: 10:50. |