写这个是因为在做项目的时候需要用到自动提示这个功能。自我感觉学的还行,就拿出来献丑了。</span>
要是有不妥的地方,请大家指点。
功能效果图:
=====================================================================================
下面是源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js 自动提示功能(可与java连接后台使用)</title>
<style type="text/css">
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:14px; padding:0px; margin:5px;
}
form{padding:0px; margin:0px;}
#popup{
/* 提示框div块的样式 */
position:absolute; width:151px;
color:#000000; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
top:26px;
}
#popup.show{
/* 显示提示框的边框 */
border:1px solid #004a7e;
}
#popup.hide{
/* 隐藏提示框的边框 */
border:none;
}
/* 提示框的样式风格 */
ul{
list-style:none;
margin:0px; padding:0px;
cursor:default; /*鼠标样式 */
}
li.mouseOver{
background-color:#CCCCCC;
color:#000000;
}
li.mouseOut{
background-color:#FFFFFF;
color:#000000;
}
-->
</style>
<!-- 实现JS匹配用户输入:-->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script language="javascript">
var oInputField; //考虑到很多函数中都要使用
var oPopDiv; //因此采用全局变量的形式
var oColorsUl;
var showIndex = -1;
var topa =0;
var oldSearch = null;
// 提示信息表,根据用户输入的字符在这个表中查找
var messages = ["你好","green","blue","magenta","yellow","ivory","darkmagenta","cornfloewrblue","css","china","connection1","yellow","ivory","darkmagenta","cornfloewrblue","css","china","connection1","yellow","ivory","darkmagenta","cornfloewrblue","css","china","connection1"];
messages.sort();
String.prototype.Trim = function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
// 键盘事件
document.onkeyup = function(event){
// 兼容 Mozilla Firefox
if (null == event) {
event = window.event;
}
if (event.keyCode == 13 || event.keyCode == 38 || event.keyCode == 40) {
keyThings(event.keyCode);
}
}
function initVars(){
//初始化变量
oInputField = document.forms["myForm1"].eqSN;
oPopDiv = document.getElementById("popup");
oColorsUl = document.getElementById("colors_ul");
}
function clear(){
//清除提示内容
$("#colors_ul").remove();
$("#popup").removeClass('show');
}
function mouseover(obj1) {
showIndex = obj1.id;
var obj = $('#colors_ul li');
obj.not(showIndex).removeClass('mouseOver');
obj.eq(showIndex).addClass('mouseOver');
}
function mouseclick(obj) {
oInputField.value = obj.innerHTML;
clear();
showIndex = -1;
}
function setResults(the_colors){
//显示提示框,传入的参数即为匹配出来的结果组成的数组
clear(); //每输入一个字母就先清除原先的提示,再继续
oPopDiv.className = "show";
var html = "<ul id='colors_ul'>";
for(var i=0;i<the_colors.length;i++){
html +="<li οnmοuseοver='mouseover(this)' οnclick='mouseclick(this)' id =" + i +" >";
html+=the_colors[i]+"</li>";
}
html +="</ul>";
// alert($(html).html());
$('#popup').append($(html));
if (the_colors.length > 10) {
$("#colors_ul").css({"height":"150px","overflow-y":"scroll"});
}
}
function findResults(){
initVars(); //初始化变量
var value = oInputField.value.Trim();
if(value.length > 0){
if (oldSearch == null || oldSearch != value) { //搜索条件变化了,重新搜索
var aResult = new Array(); //用于存放匹配结果
for(var i=0;i<messages.length;i++) {//从信息表中找匹配的信息
//必须是从单词的开始处匹配
if(messages[i].indexOf(value) == 0) {
aResult.push(messages[i]); //压入结果
}
}
if(aResult.length>0) { //如果有匹配的颜色则显示出来
setResults(aResult);
} else { //否则清除,用户多输入一个字母
clear(); //就有可能从有匹配到无,到无的时候需要清除
}
showIndex = -1;
oldSearch = value;
} else { // end if (oldSearch == null || oldSearch != value)
//搜索条件未发生变化,不需要重新搜索。
}
} else { // end if(value.length > 0){
setResults(messages);
oldSearch = value;
}
}
function getAll () {
initVars();
if (oInputField.value.Trim().length > 0) {
findResults();
} else {
setResults(messages);
}
}
function keyThings(key){
// clear();
var obj = $('#colors_ul li');
var len = $('#colors_ul li').length;
var colors_ul = $('#colors_ul');
// enter
if (key == 13) {
if (showIndex != -1) {
$("#form1 :input[name=eqSN]").val(obj.eq(showIndex).html());
}
clear();
showIndex = -1;
}
// up
if (key == 38) {
if(len > 0){
showIndex--;
if(showIndex < 0){
showIndex = len - 1;
topa = showIndex*15;
}
obj.not(showIndex).removeClass('mouseOver');
obj.eq(showIndex).addClass('mouseOver');
if(obj.eq(showIndex).position().top >= 150){
topa = (showIndex+1)*15 - 150;
colors_ul.scrollTop(topa);
};
}
}
// down
if (key == 40) {
if(len > 0){
showIndex++;
if(showIndex >= len){
showIndex = 0;
topa =0;
}
obj.not(showIndex).removeClass('mouseOver');
obj.eq(showIndex).addClass('mouseOver');
if(obj.eq(showIndex).position().top >= 150){
topa+=15;
colors_ul.scrollTop(topa);
};
}
}
}
</script>
</head>
<body>
<form method="post" name="myForm1" id="form1" οnkeypress="if(event.keyCode==13){return false;}">
<input type="text" name="eqSN" id ="eqSN" οnkeyup="findResults()" οnclick="getAll()" autocomplete="off" /> 输入con...可看见效果
<div id="popup"> <!--存放提示框的内容 -->
</div>
</form>
<p style="margin-top:200px;">
通过js实现自动提示的功能,不需要用户一个一个的去输入。输入开头的几个字母,就会自动到提示信息表(messages)中去查询。列出符合要求的信息<br />
这个还实现了滚动条/上下键选择,鼠标点击等一些便于用户操作的小功能。<br /><br />
还可以与后台联动。我用的是java语言实现的。很简单,<br />
1. 把这个页面转为jsp页面。<br />
2. 改变messages的值。通过el表达式给messages赋值 eg:${eqSNList}<br />
</p>
<p>
可在IE8 ,firefox 14.0.1, chrom 10.0. 等浏览器上成功运行。样式有些问题。
</p>
</body>
</html>