Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.10.2013, 13:43
Новичок на форуме
Отправить личное сообщение для kote Посмотреть профиль Найти все сообщения от kote
 
Регистрация: 29.10.2013
Сообщений: 6

Автозаполнение 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>
Ответить с цитированием
  #2 (permalink)  
Старый 29.10.2013, 13:47
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,223

Сообщение от kote
скрипт требует действий от пользователя - установки курсора
Куда ставить курсор?

Сообщение от kote
и нажатия enter
Что будет выполняться по нажатию на Энтер?
Ответить с цитированием
  #3 (permalink)  
Старый 29.10.2013, 13:50
Новичок на форуме
Отправить личное сообщение для kote Посмотреть профиль Найти все сообщения от kote
 
Регистрация: 29.10.2013
Сообщений: 6

Цитата:
Куда ставить курсор?
в форму поиска
Цитата:
Что будет выполняться по нажатию на Энтер?
filter.js - сортирует таблицу, с этим все нормально
Ответить с цитированием
  #4 (permalink)  
Старый 29.10.2013, 14:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,223

Сообщение от kote
в форму поиска
Что значит в твоем понимании "поставить курсор в форму поиска"?

Форма, в моем понимании, это
<form>
...
</form>


Сообщение от kote
filter.js
Будет выполняться целый файл?
Ответить с цитированием
  #5 (permalink)  
Старый 29.10.2013, 15:37
Новичок на форуме
Отправить личное сообщение для kote Посмотреть профиль Найти все сообщения от kote
 
Регистрация: 29.10.2013
Сообщений: 6

Цитата:
Что значит в твоем понимании "поставить курсор в форму поиска"?

Форма, в моем понимании, это
Наверное было бы корректнее написать:
поставить курсор в поле input
Цитата:
Будет выполняться целый файл?
Ээ в javasript я полный нуб, но я так понял что этот файл отвечает за сортировку таблицы (или списка <ul> как в примере выше)

Наверное надо сюда (функция которая берет титлы ссылок <a> и кидает их в поле <input> с id="Filter"):
<script type="text/javascript">
function clickMe(el) {
document.getElementById('filter').value = el.title;
}
</script>

Добавить функцию типа apply, enter или что-то подобное.. Сделал бы но знаний нет совсем...
Ответить с цитированием
  #6 (permalink)  
Старый 29.10.2013, 15:56
Аватар для jsru_
Кандидат Javascript-наук
Отправить личное сообщение для jsru_ Посмотреть профиль Найти все сообщения от jsru_
 
Регистрация: 09.04.2013
Сообщений: 149

попробуй
function clickMe(el) {
        var $filter = $('#filter');
        $filter.val(el.title);
        $filter.focus();
        var e = jQuery.Event("keydown");
        e.which = 13;
        $filter.trigger(e);
    }
Ответить с цитированием
  #7 (permalink)  
Старый 29.10.2013, 16:50
Новичок на форуме
Отправить личное сообщение для kote Посмотреть профиль Найти все сообщения от kote
 
Регистрация: 29.10.2013
Сообщений: 6

jsru_,
Спасибо за ответ!
Попробовал - Title ссылки отправляется в <input> и появляется мигающий курсор:

Но сортировка происходит только после нажатия "enter" или других действий. Как сделать чтобы все происходило сразу без участия пользователя?
Ответить с цитированием
  #8 (permalink)  
Старый 29.10.2013, 17:15
Аватар для jsru_
Кандидат Javascript-наук
Отправить личное сообщение для jsru_ Посмотреть профиль Найти все сообщения от jsru_
 
Регистрация: 09.04.2013
Сообщений: 149

<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>
Ответить с цитированием
  #9 (permalink)  
Старый 29.10.2013, 18:12
Новичок на форуме
Отправить личное сообщение для kote Посмотреть профиль Найти все сообщения от kote
 
Регистрация: 29.10.2013
Сообщений: 6

Работает. Но это не то что нужно...
Всем спасибо за ответы.
Ответить с цитированием
  #10 (permalink)  
Старый 29.10.2013, 18:47
Новичок на форуме
Отправить личное сообщение для kote Посмотреть профиль Найти все сообщения от kote
 
Регистрация: 29.10.2013
Сообщений: 6

Добавил кнопку "поиск"
<form>
<input type="text" id="filter" class="filter">
<input id="filter" class="filter" type="submit" value="Поиск">
<input value="Очистить">
</form>

Как связать кнопку с поиском? Сейчас при нажатии на кнопку - перезагрузка страницы и снова пустое поле((
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запретить ввод текста в input snizhok Элементы интерфейса 41 07.11.2016 13:11
Как передать в переменную массив значений из INPUT тега kapustnik Общие вопросы Javascript 3 19.04.2013 10:46
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Cчётчик значений value в элементе формы input type="text"? Surlik jQuery 8 04.04.2012 04:49
Динамический Select или Input (автозаполнение, добавление данных, обновление) kudinov Элементы интерфейса 0 21.09.2010 14:12