У меня есть текстовое поле автозаполнения, которое должно отвечать на 2 события:
- Когда пользователь набирает что-то в текстовом поле (в настоящее время я использую
focusout
, чтобы предположить, когда пользователь закончил ввод текста. Таким образом, если пользователь выходит из текстового поля, это означает, что пользователь выполнен типирование.) - Когда пользователь выбирает элемент в списке автозаполнения значений (я использую событие autocomplete
select
, чтобы определить это)
Проблема:
Когда пользователь выбирает элемент в списке значений автозаполнения, цепочка событий такова, что сначала вызывается focusout
, затем select
. Когда в focusout
, у меня есть только доступ к тому, что пользователь вводил, а не то, что пользователь выбрал из списка автозаполнения значений, - и того, что мне действительно нужно. Как решить эту проблему?
Шаги по воспроизведению проблемы:
- В текстовом поле введите букву
a
- Выберите
ActionScript
из списка автозаполнения значений -
Соблюдайте сообщения console.debug:
focusout event called a select event called ActionScript
Здесь код:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css'; return false;" rel="stylesheet" type="text/css"/>
<title>Data Matching</title>
</head>
<body>
<form>
<input id="1" type="text"></input>
<input id="2" type="submit"></input>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$('#1').autocomplete(
{
select: function (event, ui)
{
"use strict";
console.debug('select event called');
console.debug(ui.item.value);
},
source: ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"],
minLength: 1
});
$('#1').focusout(function ()
{
"use strict";
console.debug('focusout event called');
console.debug($(this).attr('value')); // At this point, I need the value that was selected from autocomplete. I only get the value that the user typed, though
});
</script>
</body>
</html>