预先出现问题 [英] Problem with Type-Ahead

问题描述

我在为

自动建议框使用预先输入功能方面遇到了一些问题。有时，当我开始键入内容并且显示

预输入时，AJAX将使用值* / $
发送请求查询*包括*提前输入值。换句话说，假设我在ja中键入

。并且出现的第一个列表是ja ** @ test.com。

AJAX部分应该发送ja部分。作为查询字符串变量之一

调用远程文件时（使用GET方法）;这样，来自远程脚本的

响应应该是所有以ja开始

的列表。但是，出于某种原因，有时候发送*的
的查询字符串*包含*提前输入值，因此它不会仅仅发送ja，

发送ja ** @ test.com，然后将搜索范围缩小到这个列表中。我假设这是某种同步

问题（XmlHttpRequest是异步的），但我还没有能够把它弄清楚。


以下是为合法密钥的keyup事件执行的代码

（不包括Shift，Home等密钥）：

[-------------------------------------------- ----------------------------

函数doSuggest（）{getSuggest（db_table_name，db_column_name，

元素（input_box_id）.value，max_listings）; }


timeoutID = window.setTimeout（doSuggest，250）;

------------------ -------------------------------------------------- ------]


这里是getSuggest函数：


[--------- -------------------------------------------------- ---------------

函数getSuggest（db_table_name，db_column_name，db_search，

max_listings）{

if（！isWorking&& http）{

var randomNumber = Math.floor（Math.random（）* 9999999）;

var url ="。 ./get_suggest.php" +

"？r =" + randomNumber +

"& db_table_name =" + db_table_name +

"& db_column_name =" + db_column_name +

"& db_search =" + db_search +

"& max_listings =" + max_listings;


http.onreadystatechange = handleHttpResponseXML;

http.open（" GET"，url，true）;

//顺便说一句，我已经尝试将

换成2行以上，但这似乎没有什么区别。


isWorking = true;

http.send（null）;

}

} //结束函数getSuggest

-------------------------------------------------- ------------------------]


最后，这里是handleHttpResponseXML代码：

函数handleHttpResponseXML（）{

if（http.readyState == 4）{

if（http.status！= 200）{

alert（REMORE SCRIPT错误！+ http.status）;

返回false;

}

如果（http.responseText.indexOf（''invalid''）== -1&& http.status

== 200）{

var xmlDocument = http。 responseXML;


var num_rows =

xmlDocument.getElementsByTagName （''num_rows''）[0] .firstChild.data;

if（num_rows< 1）{

hide（''suggest_box''）;

} else {//（num_rows> = 1）


var listings =

xmlDocument.getElementsByTagName（''output''）[0] .firstChild.data;


num_listings = num_rows;


document.getElementById（''suggest_box''）。innerHTML = listing;

show（''suggest_box''，''inline''）;


//将listing_number重置为1并突出显示它。

listing_number = 1;

highlight（''listing1''）;


// ----------- TYPE-AHEAD ------------ //

/ /如果用户按退格键或删除，则不要提前输入。

if（key == BACKSPACE || key == DELETE）{

//忽略。

}否则{

//显示

//文本框中的第一个列表（最接近的匹配），突出显示该部分用户没有输入。

//首先，获取当前文本框中文本的长度。


var char长度=

document.getElementById（input_box_id）.value.length;


//接下来，在搜索框中显示列表。

document.getElementById（input_box_id）.value =

document.getElementById（''listing1''）。innerHTML;


//最后，突出显示搜索框中的所有内容

//在用户最初输入的内容之后：


highlightRange（input_box_id，charLength）;

} //结束前进块

} //结束其他（num_rows> = 1）


isWorking = false;

}

}

} //结束函数handleHttpResponseXML

我想我还需要包含highlightRange函数：


[------------------------------------- ----------------------------------

函数highlightRange（elem，start，end ）{

var textbox = document.getElementById（elem）;

charLength = textbox.value.length;


switch（ arguments.lengt h）{

案例1：

start = 0;

end = charLength;

break;

案例2：

结束= charLength;

休息;

} //结束开关


if（textbox.createTextRange）{

var range = textbox.createTextRange（）

range.moveStart（" character"，start）;

range.moveEnd（" character"，end）;

range.select（）;

} else if（textbox.setSelectionRange）{

textbox.setSelectionRange（开始，结束）;

}

} //结束函数hightlightRange

- -------------------------------------------------- --------------------]


好​​吧，再说一遍，我知道这可能是同步问题。

我尝试过使用setTimeout，但这并不能解决问题。

另外，我已经确切地知道问题发生的时间。使用相同的

示例，让我们说'ja ** @ test.com"是第一个来自ja的
上市。而且，让我们说我正在寻找一些以jas开头

的东西。现在，问题恰好发生在以下时间：我

类型ja很快，等待一瞬间然后*之前*

" ja ** @ test.com"出现，我键入s键。 - 但键入的结果是

ja （ja ** @ test.com）显示并覆盖s和s。我只输入了

in。有关如何解决这个问题的想法（或者正确地同步AJAX

）？

I''m having a little problem with using type-ahead functionality for an
auto-suggest box. Sometimes, when I start to type something and the
type-ahead shows up, the AJAX will send a request query using the value
that *includes* the type-ahead value. In other words, say that I type
in "ja" and the first listing that comes up is "ja**@test.com". The
AJAX part is supposed to send "ja" as one of the query string variables
when calling the remote file (using the GET method); this way, the
response from the remote script should be all the listings that start
with "ja". BUT, for some reason, sometimes the query string that is
sent *includes* the type-ahead value, so instead of sending just "ja",
it will send "ja**@test.com", and consequently, narrow the search down
to this one listing. I''m assuming this is some sort of synchronization
problem (XmlHttpRequest being asynchronous), but I haven''t been able to
figure it out.

Here is the code that executes for the keyup event of a legitimate key
(excluding keys like Shift, Home, etc.):

[------------------------------------------------------------------------
function doSuggest() { getSuggest(db_table_name, db_column_name,
element(input_box_id).value, max_listings); }

timeoutID = window.setTimeout(doSuggest, 250);
--------------------------------------------------------------------------]

And here''s the getSuggest function:

[--------------------------------------------------------------------------
function getSuggest(db_table_name, db_column_name, db_search,
max_listings) {
if (!isWorking && http) {
var randomNumber = Math.floor(Math.random() * 9999999);
var url = "../get_suggest.php" +
"?r=" + randomNumber+
"&db_table_name=" + db_table_name +
"&db_column_name=" + db_column_name +
"&db_search=" + db_search +
"&max_listings=" + max_listings;

http.onreadystatechange = handleHttpResponseXML;
http.open("GET", url, true);
//By the way, I''ve tried swapping the
above 2 lines, but this doesn''t seem to make a difference.

isWorking = true;
http.send(null);
}
}//end function getSuggest
--------------------------------------------------------------------------]

Finally, here''s the handleHttpResponseXML code:
function handleHttpResponseXML() {
if (http.readyState == 4) {
if (http.status != 200) {
alert("ERROR ON REMOTE SCRIPT! " + http.status);
return false;
}
if (http.responseText.indexOf(''invalid'') == -1 && http.status
== 200) {
var xmlDocument = http.responseXML;

var num_rows =
xmlDocument.getElementsByTagName(''num_rows'')[0].firstChild.data;
if(num_rows < 1) {
hide(''suggest_box'');
} else {//(num_rows >= 1)

var listings =
xmlDocument.getElementsByTagName(''output'')[0].firstChild.data;

num_listings = num_rows;

document.getElementById(''suggest_box'').innerHTML = listings;
show(''suggest_box'', ''inline'');

//Reset listing_number back to 1 and highlight it.
listing_number = 1;
highlight(''listing1'');

//----------- TYPE-AHEAD ------------//
//If user pressed backspace or delete, don''t do type-ahead.
if (key == BACKSPACE || key == DELETE) {
//Ignore.
} else {
//Show the first listing (which is the closest match) in the
//textbox, highlighting the part the user has not typed.
//First, get length of the text currently in textbox.

var charLength =
document.getElementById(input_box_id).value.length ;

//Next, show the listing in the search box.
document.getElementById(input_box_id).value =
document.getElementById(''listing1'').innerHTML;

//Finally, highlight everything in the search box
//after what the user had originally typed:

highlightRange(input_box_id, charLength);
}//end type-ahead block
}//end else (num_rows >= 1)

isWorking = false;
}
}
}//end function handleHttpResponseXML

I guess I need to include the highlightRange function, too:

[-----------------------------------------------------------------------
function highlightRange(elem, start, end) {
var textbox = document.getElementById(elem);
charLength = textbox.value.length;

switch (arguments.length) {
case 1:
start = 0;
end = charLength;
break;
case 2:
end = charLength;
break;
}//end switch

if (textbox.createTextRange) {
var range = textbox.createTextRange()
range.moveStart("character", start);
range.moveEnd("character", end);
range.select();
} else if (textbox.setSelectionRange) {
textbox.setSelectionRange(start, end);
}
}//end function hightlightRange
------------------------------------------------------------------------]

Alright, so again, I know it''s probably a synchronization problem.
I''ve tried using setTimeout, but this isn''t going to solve the problem.
Also, I''ve found out exactly when the problem occurs. Using the same
example, let''s say that "ja**@test.com" is the first listing that comes
up for "ja". And let''s say that I''m looking for something starting
with "jas". Now, the problem occurs exactly in the following timing: I
type "ja" quickly, wait a split second and then *right before*
"ja**@test.com" shows up, I type in an "s" - but the result from typing
the "ja" ("ja**@test.com") shows up and overrides the "s" I just typed
in. Any ideas on how I can fix this problem (or synchronize the AJAX
properly)?

推荐答案

Joel Byrd写道：

Joel Byrd wrote:

我在使用预先输入功能时遇到一点问题
自动建议框。有时候，当我开始键入内容并显示
type-ahead时，AJAX将使用值*包含*提前输入值来发送请求查询。换句话说，我在ja中键入
。并且出现的第一个列表是ja ** @ test.com。
AJAX部分应该发送ja部分。作为查询字符串变量之一
调用远程文件时（使用GET方法）;这样，来自远程脚本的响应应该是以ja开始的所有列表。但是，出于某种原因，有时发送的查询字符串*包含*提前输入值，因此它不会仅发送ja，而是发送ja ** @ test .com"，因此，将搜索范围缩小到这一个列表。


[snip]

函数doSuggest（）{getSuggest（db_table_name，db_column_name，
element（input_box_id）.value，max_listings）; }


这里您将文本输入的值发送到getSuggest

函数。这将包括通过以下方式放入

文本输入的前瞻：

[snip]

//接下来，显示列表中的列表搜索框。
document.getElementById（input_box_id）.value =
document.getElementById（''listing1''）。innerHTML;


因此，要么不将全部建议放入文本输入中

或者不要将所选文本输入部分发送给getSuggest

函数。

好​​吧，再说一次，我知道这可能是一个同步问题。

I''m having a little problem with using type-ahead functionality for an
auto-suggest box. Sometimes, when I start to type something and the
type-ahead shows up, the AJAX will send a request query using the value
that *includes* the type-ahead value. In other words, say that I type
in "ja" and the first listing that comes up is "ja**@test.com". The
AJAX part is supposed to send "ja" as one of the query string variables
when calling the remote file (using the GET method); this way, the
response from the remote script should be all the listings that start
with "ja". BUT, for some reason, sometimes the query string that is
sent *includes* the type-ahead value, so instead of sending just "ja",
it will send "ja**@test.com", and consequently, narrow the search down
to this one listing.
[snip]
function doSuggest() { getSuggest(db_table_name, db_column_name,
element(input_box_id).value, max_listings); }
Here you are sending the value of the text input to the getSuggest
function. This would include the lookahead that was placed into the
text input by:
[snip]
//Next, show the listing in the search box.
document.getElementById(input_box_id).value =
document.getElementById(''listing1'').innerHTML;
So either don''t put the entirety of the suggestion into the text input
or don''t send the selected portion of the text input to the getSuggest
function.
Alright, so again, I know it''s probably a synchronization problem.

不。它正在做你正在告诉它的事情。它与AJAX没有任何关系。 OT：您应该考虑使用关键事件

而不是计时器。如果用户没有输入任何内容，则无需向服务器进行往返

。

Nope. It''s doing exactly what you''re telling it to. It doesn''t have
anything to do with the AJAX. OT: You should consider using key events
instead of a timer. There''s no need to make a roundtrip to the server
if the user hasn''t typed anything.

但是使用自动完成功能时，当我输入一个字母时，任何现有的

类型提前字符会自动消失，这样那时，输入框中的
只是输入框中的内容我输入了什么，并且在那个

点我调用了getSuggest函数，它使用输入框的当前值查询数据库

，然后* *基于

结果，创建预先输入字符。所以，我没有看到

类型提前字符是如何被发送到数据库的，因为序列

的动作就是我刚刚描述的。即便如此，我知道提前输入

字符有时*被*发送到数据库。所以，再次，我认为这是某种同步问题（我不假装是任何类型的javascript专家，所以我当然可以这是错的

- 我只是想了解它）。总之，

代码的顺序如下（我们假设用户已经输入了一些字母

，因此已经突出显示了一些提前输入的文本）：


1）用户键入一个字母。


2）在keydown上，突出显示的提前输入文本消失，所以现在

3）在keyup上，调用autosuggest函数：

getSuggest（db_table_name ，db_column_name，

document.getElementById（input_box_id）.value，max_listings）。


4）XmlHttpRequest对象用于使用
输入框的当前值（此时*应该*仅为用户键入的
）（参见步骤2）。

5）结果从这个查询返回，填充下拉菜单

框并用第一个结果填充输入框，突出显示

什么是用户没有打字。

But with the autocomplete, when I type a letter, any existing
type-ahead characters automatically disappear, so that at that moment,
what is in the input box is only what I have typed, and it is at that
point that I call the getSuggest function, which queries the database
with the current value of the input box, and *then* based on the
results, creates the type-ahead characters. So, I don''t see how the
type-ahead characters could get sent to the database since the sequence
of actions is what I just described. Even so, I know the type-ahead
characters sometimes *are* being sent to the database. So, again, I
think it''s some sort of synchronization problem (I don''t pretend to be
any kind of javascript expert, so I certainly could be wrong about this
- I''m just trying to understand it). In summary, the sequence of the
code is the following (we''ll assume user has already typed some letters
so that there is already some type-ahead text highlighted):

1) User types a letter.

2) On keydown, the highlighted type-ahead text disappears so that now
all that appears is what the user has typed.

3) On keyup, the autosuggest function is called:
getSuggest(db_table_name, db_column_name,
document.getElementById(input_box_id).value, max_listings).

4) The XmlHttpRequest object is used to query the database with the
current value of the input box (which *should*, at this point, be only
what the user has typed (see step 2).

5) Results come back from this query, populating the drop-down suggest
box and populating the input box with the first result, highlighting
what the user has not typed.

事实上，我刚做了一些测试，并意识到即使没有提前输入*功能，我也会遇到相同的问题。所以提前输入

不是问题。

In fact, I just did some testing and realized that I am having the same
problem even *without the type-ahead* functionality, so the type-ahead
is not the problem.

这篇关于预先出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！