输入的Javaｓｃｒｉｐｔ：sugggestion.js自动提示搜索提示

复制代码代码如下所示：

*函数：js文件中的代码实现了{输入自动搜索提示}的功能，如输入百度和谷歌搜索框中的一些字符，在下面的下拉列表表单中提供一些提示，提高用户体验。
*使用说明：看到suggestions.txt文件
*作者：孙菲（Sun Fei）日期：2013.08.21
* /
无功sugobj =新的对象（）；

$（文档）Ready（函数（）{）

获取输入框属性信息文件被加载，确保数据搜索提示和文本输入框显示一致性。
使用搜索输入框提示
sugobj.keywords_input_id =keywords_input ；
搜索输入框高度
sugobj.keywords_input_height = $（# + sugobj。keywords_input_id + ）（的高度）；
搜索输入框宽度
sugobj.keywords_input_width = $（# + sugobj。keywords_input_id + ）（宽度）；
搜索输入框宽度字体颜色
sugobj.keywords_input_color = $（# + sugobj。keywords_input_id +）。Css（色）；
搜索输入框宽度字体大小
sugobj.keywords_input_font_size = $（# + sugobj。keywords_input_id +）。Css（字体大小）；
用户输入值
sugobj.keywords_input_value = null；

设置显示div样式的搜索提示
显示div id的消息
sugobj.suggestion_div_id =sug_layer_div ；
默认的消息/ div样式
$（# + sugobj。suggestion_div_id +）。AddClass（suglayerdiv ）；
根据输入框设置宽度
$（# + sugobj。suggestion_div_id +）。Css（宽
/ / $（# + sugobj。suggestion_div_id +）。Css（位置
/ / $（# + sugobj。suggestion_div_id +）。Css（溢出
/ / $（# + sugobj。suggestion_div_id +）。Css（背景
/ / $（# + sugobj。suggestion_div_id +）。Css（边界
/ / $（# + sugobj。suggestion_div_id +）。Css（显示

结果表明，缺省的数量是
sugobj.default_showitem_count = 10；
设置号码并单击更多显示
sugobj.more_showitem_count = 20；
位置标记为 键
sugobj.cursor_now_position = - 1；
}）；
考虑一下性能：如果用户每次向服务器输入一封信，服务器将承载太多，
所以每次可以考虑 / /请求延迟0.5s派（认为）

$（文档）Ready（函数（）{）

身份 / /输入框keywords_input，这里听的输入框KeyUp事件
$（# + sugobj。keywords_input_id +（Keyup）函数（事件）{
如果（（> = 48 = 96的情况下的情况下，情况下< = 105）| |
（Event.keyCode > = 65的情况下< = 90的情况下= = 8）{ | |）
获取输入框值驱动器
无功功率= $（# + sugobj。keywords_input_id + ）（。Val）；
删除输入字符串两端的空格。
（Kw为kw.replace /（^ *）|（ * $）/ g，）；
如果（={ {）
空内容
$（# + sugobj。suggestion_div_id + ）（空）；
隐藏
$（# + sugobj。suggestion_div_id +）。Css（显示
{人}
/ /用户输入的值存储在sugobj
sugobj.keywords_input_value =千瓦；
运行ajax请求结果
（0）runsearchajax；
}
} else if（的情况下= = 38）{ / /向上箭头
如果（--sugobj.cursor_now_position = 1）{ / /判断减一是否搬到了一个文本框
$（# + sugobj。keywords_input_id +）。瓦迩（sugobj。keywords_input_value）；
结果表明，# FFF / /删除风格的白色
$（# showdatatable tr.line ）Css（背景。
} else if（sugobj.cursor_now_position = 2）{ / /文本框中，按上箭头移动的最后一行
从0开始搜索提示结果索引
VaR指标= $（# showdatatable tr.line ）长1；
搜索/提交0返回的结果
如果（索引< 0）{
返回；
}
记下最后结果
$（# + sugobj。keywords_input_id + ）（美元。瓦尔（$（# showdatatable tr.line ）{指数}）（文本））；
$（$（# showdatatable tr.line ）{指数}）。兄弟姐妹（）。Css（背景
sugobj.cursor_now_position =指数；
{ }人
$（# + sugobj。keywords_input_id + ）（美元。瓦尔（$（# showdatatable tr.line ）{ sugobj。cursor_now_position }）（文本））；
$（$（# showdatatable tr.line ）{ sugobj。cursor_now_position }）。兄弟姐妹（）。Css（背景
}
} else if（的情况下= = 40）{ / /下箭头
无功trcount = $（# showdatatable tr.line长度）；
如果（+ + sugobj.cursor_now_position = = trcount）与{ / /判断术后cursor_now_position值超出列表的数量限制
它将超过初始值的 / / cursor_now_position值
sugobj.cursor_now_position = - 1；
和用于搜索中值的文本框
$（# + sugobj。keywords_input_id +）。瓦迩（sugobj。keywords_input_value）；
结果表明，删除样式
$（# showdatatable TR）。Css（背景
{ }人
$（# + sugobj。keywords_input_id + ）（美元。瓦尔（$（# showdatatable tr.line ）{ sugobj。cursor_now_position }（文本）））； / /电流在输入框中显示结果
$（$（# showdatatable tr.line ）{ sugobj。cursor_now_position }）。兄弟姐妹（）。Css（背景
}
如果…
}）；

光标左/输入框隐藏搜索提示
$（# + sugobj。keywords_input_id +（功能）（Blur）{

var =（功能window.setinterval -INtId已存在（））{
$（# + sugobj。suggestion_div_id +）。Css（显示
window.clearinterval（-INtId已存在）；
}，200）；

$（# + sugobj。suggestion_div_id +tr.line。单击（功能）{（）
window.clearinterval（-INtId已存在）；
$（# + sugobj。keywords_input_id +（$。Val）（这）（文本））；
$（# + sugobj。keywords_input_id + ）（重点）；
sugobj.cursor_now_position = - 1；
（0）runsearchajax；
}）；

$（# + sugobj。suggestion_div_id +tr.moreline。单击（功能）{（）
window.clearinterval（-INtId已存在）；
$（# + sugobj。keywords_input_id + ）（重点）；
sugobj.cursor_now_position = - 1；
（1）runsearchajax；
}）；
}）；

}）；

对于二十多个1，仅显示二十，小于二十，显示多少。
对于十多个0，仅显示十，小于十，显示多少。
功能runsearchajax（更）{
$ ajax（{
键入：获取
DataType：JSON
网址：$（# + sugobj。keywords_input_id +）。Attr（searchurl ），
数据：{
keywords_input ：逃避（$（# + sugobj。keywords_input_id + ）（瓦迩））
}，
成功：函数（数据，状态）{
如果（data.suglist = = null data.suglist =定义的| | | | { data.suglist.length = = 0）
$（# + sugobj。suggestion_div_id + ）（空）；
$（# + sugobj。suggestion_div_id +）。Css（显示
{人}
/ / var result =美元。parseJSON（数据。suglist）；
var result = data.suglist；
无功dataarray = { }；
每个（结果，函数（i，value）{）
DataArray.push（值）；
}）；
要获得的记录数/
无功dataitemlength = dataarray.length；
如果（dataitemlength <= 0）{
返回；搜索0的提交结果，它返回
}

无功layerlabel = { }；
（layerlabel。推）； / /创建一个表
如果（大于= 0）{
如果（dataitemlength sugobj。default_showitem_count）{
对于（var i = 0；i < dataitemlength；+ +我）{
LayerLabel.push（< TR风格= 'cursor：指针；颜色：+ sugobj。keywords_input_color +；字体大小：+ sugobj。keywords_input_font_size + ）；
LayerLabel.push（类行>+ dataarray {我} + ）；
}
其他{ }
对于（var i = 0；i < sugobj.default_showitem_count；+ +我）{
LayerLabel.push（< TR风格= 'cursor：指针；颜色：+ sugobj。keywords_input_color +；字体大小：+ sugobj。keywords_input_font_size + ）；
LayerLabel.push（类行>+ dataarray {我} + ）；
}
LayerLabel.push（< TR风格= 'cursor：指针；颜色：+ sugobj。keywords_input_color +；字体大小：+ sugobj。keywords_input_font_size + ）；
LayerLabel.push（class= 'moreline>）；
LayerLabel.push（更多…）；
}
}如果（大于= 1）{
如果（dataitemlength sugobj。more_showitem_count）{
对于（var i = 0；i < dataitemlength；+ +我）{
LayerLabel.push（< TR风格= 'cursor：指针；颜色：+ sugobj。keywords_input_color +；字体大小：+ sugobj。keywords_input_font_size + ）；
LayerLabel.push（类行>+ dataarray {我} + ）；
}
其他{ }
对于（var i = 0；i < sugobj.more_showitem_count；+ +我）{
LayerLabel.push（< TR风格= 'cursor：指针；颜色：+ sugobj。keywords_input_color +；字体大小：+ sugobj。keywords_input_font_size + ）；
LayerLabel.push（类行>+ dataarray {我} + ）；
}
}
其他{ }
对于（var i = 0；i < dataitemlength；+ +我）{
LayerLabel.push（< TR风格= 'cursor：指针；颜色：+ sugobj。keywords_input_color +；字体大小：+ sugobj。keywords_input_font_size + ）；
LayerLabel.push（类行>+ dataarray {我} + ）；
}
}
LayerLabel.push（）；
VAR层= layerlabel.join（）；

$（# + sugobj。suggestion_div_id +）。Css（显示
/ /所有的子元素的第一个空下# SearchResult
$（# + sugobj。suggestion_div_id + ）（空）；
/ /新创建的表# SearchResult
$（# + sugobj。suggestion_div_id +）追加（层）；
$（# showdatatable TR）。Css（颜色
$（# showdatatable TR）。Css（字体大小
/ /监控提示框mouseover事件
$（tr.line）。Hover（function（）{）
$(tr.line).Css (background
$（这个）Css（背景
}函数（）{（）
$（这个）Css（背景
}）；
}
}
}）；
}

坐标转换输入框
功能changecoords（）{
/ /获取距离最左边的像素距离，整数
Var left = $(# +SugObj.keywords_input_id+ .OffsetLeft);
上/下距离距离，整数像素
var = $（# + sugobj。keywords_input_id + 。offsettop + keywords_input_height ）；
重新定义CSS属性
$（# + sugobj。suggestion_div_id +）。Css（左
$（# + sugobj。suggestion_div_id +）。Css（顶
}

监视鼠标单击事件的搜索结果
功能hoveraction（数据）{
隐藏搜索提示div
$（# + sugobj。suggestion_div_id +）。Css（显示
将数据添加到搜索/单击提示框中
$（# + sugobj。suggestion_div_id +）瓦迩（数据）；
光标/焦点搜索输入框提示
$（# + sugobj。suggestion_div_id + ）（重点）；
/ / cursor_now_position值为初始值
cursor_now_position = - 1；
将要发送请求到服务器的运行方式
（0）runsearchajax；
}

的形式/尺寸变化将触发调整（）事件，在事件中调用changecoords（）方法
$（窗口）大小（changecoords）；