输入框提示
输入框提示
手动实现 类似百度的热词提示，支持回车，上下键选择，单击选择
var selectedIndex = -1;
?
//绑定事件
$(function(){
??? ??? //获取匹配热词???
??? ??? var timeout = null;
??? ??? $("#name").blur(function(){
??? ??? ??? $("#hotWordView").html("").hide();
??? ??? }).keydown(function(event){
??? ??? ??? var event = event || window.event;
??? ??? ??? var keyCode = event.keyCode;
??? ??? ??? if(keyCode == 40 || keyCode == 38){
??? ??? ??? ??? var isUp = false;
??? ??? ??? ??? if(keyCode == 40){
??? ??? ??? ??? ??? isUp = true;???
??? ??? ??? ??? }
??? ??? ??? ??? changeSelection(isUp);
??? ??? ??? }else if(keyCode == 13){
??? ??? ??? ??? if(selectedIndex == -1){
??? ??? ??? ??? ??? $("#hotWordView").html("").hide();
??? ??? ??? ??? ??? clickButton();
??? ??? ??? ??? }else{
??? ??? ??? ??? ??? var txt = $("#hotWordView").find("div[class='hotwordclass']").find("div:first").html();
??? ??? ??? ??? ??? $("#name").val(txt);
??? ??? ??? ??? ??? $("#hotWordView").html("").hide();??? ??? ??? ??? ???
??? ??? ??? ??? ??? clickButton();
??? ??? ??? ??? ??? selectedIndex = -1;
??? ??? ??? ??? }
??? ??? ??? }else{
??? ??? ??? ??? selectedIndex = -1;
??? ??? ??? ??? clearTimeout(timeout);
??? ??? ??? ??? timeout = setTimeout(function(){???
??? ??? ??? ??? ??? ??? if($("#name").val().length > 0){
??? ??? ??? ??? ??? ??? ??? getHotWord();
??? ??? ??? ??? ??? ??? }else{
??? ??? ??? ??? ??? ??? ??? $("#hotWordView").html("").hide();
??? ??? ??? ??? ??? ??? }
??? ??? ??? ??? },200);
??? ??? ??? }
??? ??? });???
??? ??? $("#moreSearchCondition").keydown(function(event)
??? ??? {
??? ??? ??? var event = event || window.event;
??? ??? ??? var keyCode = event.keyCode;
??? ??? ??? if(keyCode == 13)
??? ??? ??? {
??? ??? ??? ??? moreSearchClickButton();
??? ??? ??? }
??? ??? });???
? ??? });
???? //上下键选择的function
? ??? function changeSelection(isUp){
? ??? ??? if(isUp){
? ??? ??? ??? selectedIndex++;
? ??? ??? }else{
? ??? ??? ??? selectedIndex--;
? ??? ??? }
? ??? ??? var maxIndex = $("#hotWordView").children().length -1;
? ??? ??? if(selectedIndex < 0){
? ??? ??? ??? selectedIndex = maxIndex;
? ??? ??? }
? ??? ??? if(selectedIndex > maxIndex){
? ??? ??? ??? selectedIndex = 0;
? ??? ??? }
? ??? ??? for(var i = 0; i <= maxIndex; i++){
? ??? ??? ??? if(i == selectedIndex){
? ??? ??? ??? ??? $("#hotWordView").children()[i].className = "hotwordclass";
? ??? ??? ??? }else{
? ??? ??? ??? ??? $("#hotWordView").children()[i].className = "";
? ??? ??? ??? }
? ??? ??? }
? ??? }
????? //从后台获取相关的词，并进行页面的展示
? ??? function getHotWord()
? ??? {
??? ??? $.ajax({
??? ??? ??? type:'post',
??? ??? ??? url:'getWord.do',
??? ??? ??? data:{'name':$("#name").val()},
??? ??? ??? dataType:'json',
??? ??? ??? success:function(data)
??? ??? ??? {???
??? ??? ??? ??? if(!data || data.length<1)
??? ??? ??? ??? {
??? ??? ??? ??? ??? $("#hotWordView").html("").hide();
??? ??? ??? ??? }
??? ??? ??? ??? else
??? ??? ??? ??? {
??? ??? ??? ??? ??? var position = $("#name").position();
??? ??? ??? ??? ??? $("#hotWordView").html("").css({left: position.left , top: position.top
??? ??? ??? ??? ??? ??? + $("#name").outerHeight()}).width($("#name").width() - 2).show();
??? ??? ??? ??? ??? var i = 0;
?????????????????? //为每一个绑定事件
??? ??? ??? ??? ??? $.each(data,function(key,values){
??? ??? ??? ??? ??? ??? i++;
??? ??? ??? ??? ??? ??? var funList = (function(_i){??? ???
??? ??? ??? ??? ??? ??? ??? return [
??? ??? ??? ??? ??? ??? ??? ??? function()
??? ??? ??? ??? ??? ??? ??? ??? {
??? ??? ??? ??? ??? ??? ??? ??? ??? $("#hotWordView").children().removeClass("hotwordclass");
??? ??? ??? ??? ??? ??? ??? ??? ??? $("#divhot" + _i).addClass("hotwordclass");
??? ??? ??? ??? ??? ??? ??? ??? ??? selectedIndex = _i;
??? ??? ??? ??? ??? ??? ??? ??? },
??? ??? ??? ??? ??? ??? ??? ??? function()
??? ??? ??? ??? ??? ??? ??? ??? {
??? ??? ??? ??? ??? ??? ??? ??? ??? if(selectedIndex == -1){
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? $("#hotWordView").html("").hide();
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? clickButton();
??? ??? ??? ??? ??? ??? ??? ??? ??? }else{
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? var txt = $("#divhot" + (selectedIndex)).find("div:first").html()
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? $("#name").val(txt);
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? $("#hotWordView").html("").hide();??? ??? ??? ??? ???
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? clickButton();
??? ??? ??? ??? ??? ??? ??? ??? ??? ??? selectedIndex = -1;
??? ??? ??? ??? ??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? ??? ??? ??? },
??? ??? ??? ??? ??? ??? ??? ??? function(){
??? ??? ??? ??? ??? ??? ??? ??? ??? var txt = $("#divhot" + (selectedIndex)).find("div:first").text();
??? ??? ??? ??? ??? ??? ??? ??? ??? $("#name").val(txt);
??? ??? ??? ??? ??? ??? ??? ??? ??? selectedIndex = -1;
??? ??? ??? ??? ??? ??? ??? ??? ??? clickButton();
??? ??? ??? ??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? ??? ??? ];??? ??? ???
??? ??? ??? ??? ??? ??? })(i);
??? ??? ??? ??? ??? ???
??? ??? ??? ??? ??? ??? var list = [
??? ??? ??? ??? ??? ??? ??? "<div id='divhot" + i + "' style='float:left;width:100%;clear:both;'>",
??? ??? ??? ??? ??? ??? ??? ??? "<div style='float:left;margin-left:5px;'>"+ key +"</div>",
??? ??? ??? ??? ??? ??? ??? ??? "<div style='float:right;margin-right:5px;'>"+ values +"</div>",
??? ??? ??? ??? ??? ??? ??? "</div>"
??? ??? ??? ??? ??? ??? ].join("");
??? ??? ??? ??? ??? ??? $("#hotWordView").append(list);
??? ??? ??? ??? ??? ??? $("#divhot" + i).mouseover(funList[0]).keydown(funList[1]).mousedown(funList[2]); ???
??? ??? ??? ??? ??? ?});
??? ??? ??? ? }
??? ??? ??? },
??? ??? ??? error : function(e) {
??? ??? ??? ??? $("#hotWordView").html("").hide();
??? ??? ??? }???
??? ??? });
? ??? }
