JS类百度的动态提示框思路及完成
参考的代码来自这里：
http://www.jb51.net/article/28075.htm
不过说实话，这个网站太烂了，不适合看代码，另外写代码的人是个大牛，但是却没有模块化思想，所以朕不高兴直接用，索性是周末就花时间写一个吧。
明确一下需求：
需要一个输入框，在用户输入之后（keyup事件），将用户输入返回给外部，并从外部获取提示信息，显示到输入框下方
另外：
1、在失去焦点时，需要消去提示框
2、需要屏蔽浏览器原有的提示功能
3、监听键盘上下键，循环选择提示项
4、当窗口位置变化时，重新定位提示框
模块结构：
function AutoCompleteInput(Input,callBack){ this.Input = Input; this.callBack = callBack; } /** * 设置提示内容 * @param txt {String}提示内容，以","隔开 */ AutoCompleteInput.prototype.setAutoText = function(obj,txt){ };
足够简单吧？哈，下面就看实现了，请期待吧，估计晚上能写完。
晚了点，不过有原因的，中间做了个ppt
/** * Created by william on 2015/1/16. */ define(function(){ function AutoCompleteInput(Input, callBack) { this.$Input = $(Input);//输入框对象 this.callBack = callBack; this.$autocomplete; //提示框对象 this.Init(); this.selectedIndex = -1; } /** * 设置提示内容 * @param txt {String}提示内容，以","隔开 */ AutoCompleteInput.prototype.setAutoText = function (txt) { var self = this; if(txt.length==0||txt =="") return; var str = txt.split(','); $.each(str,function(index,term){ $('<li style="list-style-type: none;cursor: default;"></li>').text(term).appendTo(self.$autocomplete) .hover(function () { //下拉列表每一项的事件，鼠标移进去的操作 $(this).siblings().css("background-color","white"); $(this).css("background-color","#9ACCFB"); self.selectedIndex = index; }, function () { //下拉列表每一项的事件，鼠标离开的操作 $(this).css("background-color","white"); //当鼠标离开时索引置-1，当作标记 self.selectedIndex = -1; }) .click(function () { //鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中 self.$Input.val(term); //清空并隐藏下拉列表 self.$autocomplete.empty().hide(); }); }); this.$autocomplete.show(); }; AutoCompleteInput.prototype.Init = function () { var self = this; this.$Input.attr("autocomplete", "off"); var position = this.$Input.position(); var w = this.$Input.width()+2; this.$autocomplete = $('<div style="position: absolute;left: '+position.left+'px;top:'+position.bottom+'px;width:' +w+'px;border: 1px solid #9ACCFB;background-color: white;text-align: left;"></div>') .hide().insertAfter(this.$Input); //设置键盘事件 this.$Input.keyup(function (event) { //字母数字，退格，空格 if (event.keyCode > 40 || event.keyCode == 8 || event.keyCode == 32) { //首先删除下拉列表中的信息 self.clear(); self.callBack(self,self.$Input.val()); return; } //方向键 上 if (event.keyCode == 38) { //selectedIndex = -1 代表鼠标离开 if (self.selectedIndex == -1) { self.setSelectedItem(self.$autocomplete.find('li').length - 1); } else { //索引减1 self.setSelectedItem(self.selectedIndex - 1); } event.preventDefault(); return; } //方向键 下 if (event.keyCode == 40) { //this.selectedIndex = -1 代表鼠标离开 if (self.selectedIndex == -1) { self.setSelectedItem(0); } else { //索引加1 self.setSelectedItem(self.selectedIndex + 1); } event.preventDefault(); return; } //enter键 if (event.keyCode == 13) { //列表为空或者鼠标离开导致当前没有索引值 if (self.$autocomplete.find('li').length == 0 || self.selectedIndex == -1) { return; } self.$Input.val(self.$autocomplete.find('li').eq(self.selectedIndex).text()); self.$autocomplete.empty().hide(); event.preventDefault(); return; } //esc键 if (event.keyCode == 27) { self.$autocomplete.empty().hide(); event.preventDefault(); } }); //设置当输入框失去焦点时，消去 this.$Input.blur(function () { setTimeout(function(){self.$autocomplete.empty().hide();},100);//这个地方名空间和复杂，不要修改 }); }; AutoCompleteInput.prototype.clear = function(){ //if(this.$autocomplete) this.$autocomplete.empty().hide(); }; AutoCompleteInput.prototype.setSelectedItem = function (index) { //更新索引变量 this.selectedIndex = index; //按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0 if (this.selectedIndex < 0) { this.selectedIndex = this.$autocomplete.find('li').length - 1; } else if (this.selectedIndex > this.$autocomplete.find('li').length - 1) { this.selectedIndex = 0; } //首先移除其他列表项的高亮背景，然后再高亮当前索引的背景 this.$autocomplete.find('li').css("background-color","white") .eq(this.selectedIndex).css("background-color","#9ACCFB"); }; return AutoCompleteInput; });
测试代码：
var f = function(obj,txt){ if(txt=="a"){ obj.setAutoText("a,aa,aaa"); } if(txt=="b"){ obj.setAutoText("b,bb,bbb"); } }; var p = new inp(document.getElementById("input"),f); var p2 = new inp(document.getElementById("i2"),f);
