input 仿百度下拉框

<input id="companyName" path="companyName" maxlength="50" class="form-control" autocomplete="off" placeholder="请至少输入两个字符进行查询" οninput="findCompany()"/>
<div id="auto_div" style="position: absolute;z-index:50;width:92.7%">
JavaScript:
var old_value = "";
var highlightindex = -1;   //高亮
//自动完成
function AutoComplete(auto, search, mylist) {
   if ($("#" + search).val() != "") {//old_value || old_value ==
      var verifyText = document.getElementById("verifyText");
      var autoNode = $("#" + auto);   //缓存对象(弹出框)
      old_value = $("#" + search).val();
      if (mylist.length == 0) {
         verifyText.innerText = "没有找到匹配项";
         autoNode.hide();
         return;
      }
      autoNode.empty();  //清空上次的记录
      for (var i in mylist) {
         var wordNode = mylist[i];   //弹出框里的每一条内容
         // if(wordNode.id == "")
         // {
         //     autoNode.hide();
         //     return;
         // }
         var newDivNode = $("<div>").attr("id", i);    //设置每个节点的id值
         newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;background-color:white");
         newDivNode.html(wordNode.name).appendTo(autoNode);  //追加到弹出框
         //鼠标移入高亮,移开不高亮
         newDivNode.mouseover(function () {
            if (highlightindex != -1) {        //原来高亮的i节点要取消高亮(是-1就不需要了)
               autoNode.children("div").eq(highlightindex).css("background-color", "white");
            }
            //记录新的高亮节点索引
            highlightindex = $(this).attr("id");
            $(this).css("background-color", "#ebebeb");
         });
         newDivNode.mouseout(function () {
            $(this).css("background-color", "white");
         });
         //鼠标点击文字上屏
         newDivNode.click(function () {
            //取出高亮节点的文本内容
            var comText = autoNode.hide().children("div").eq(highlightindex).text();
            highlightindex = -1;
            //文本框中的内容变成高亮节点的内容
            $("#" + search).val(comText);
         })
         if (mylist.length > 0) {    //如果返回值有内容就显示出来
            autoNode.show();
         } else {               //服务器端无内容返回 那么隐藏弹出框
            autoNode.hide();
            //弹出框隐藏的同时,高亮节点索引值也变成-1
            highlightindex = -1;
         }
      }
   }
   else
   {
      var autoNode = $("#" + auto);
      autoNode.hide();
      return;
   }
   //点击页面隐藏自动补全提示框
   document.onclick = function (e) {
      var e = e ? e : window.event;
      var tar = e.srcElement || e.target;
      if (tar.id != search) {
         if ($("#" + auto).is(":visible")) {
            $("#" + auto).css("display", "none")
         }
      }
   }
}
$(function () {
   old_value = $("#companyName").val();
   $("#companyName").focus(function () {
      if ($("#companyName").val() == "") {
         AutoComplete("auto_div", "companyName", "");
      }
   });
});
function findCompany() {
   var companyName = document.getElementById("companyName").value;
   var verifyText = document.getElementById("verifyText");
   if(companyName.length > 1) {
      verifyText.innerText = "";
      $.ajax({
         url:url,//自己的请求地址
         type: 'GET',
         dataType: 'json',
         data: {
            word: companyName
         },
         success: function(data){
            var rows = data.mapList;
            AutoComplete("auto_div", "companyName", rows);
         },
         error: function(){

         }
      })
   }
   else
   {
      $("#auto_div").hide();
      var length = 2 - companyName.length;
      verifyText.innerText = "请再输入至少" + length + "个字符";
   }
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值