实现Input框智能响应

当我们打开浏览器时，无论百度、谷歌、360等浏览器，都会在搜索框智能响应用户输入的内容，根据关键字的匹配来进行模糊查询，智能响应用户想要的数据、或关键字。正好，在公司的项目中，也遇到了类似的场景，简单记录下吧。

其实就是用到了input的propertychange属性。通过该属性，可以通过input输入框value值得改变通过js来根据场景切换相应的Html布局内容，从而实现所谓的智能响应。实质上来说，还是挺简单的一个东西。我们来简单看下布局代码(使用的是：Bootstrap自行前往下载即可：

<form class="form-inline">
    <div class="form-group">
        <label>生产人员</label>
        <input type="text" class="form-control" id="ProductPerson">
        <div id="P_Select"></div>
    </div>
</form>

原理上：propertychange(value改变向后台执行模糊查询)+onblur(失去焦点隐藏查询到的导航栏)+onclik(点击给input赋值)，但是在使用的过程中我突然遇到这样一个问题：使用了onblur后，无法触发onclick事件，即jquery的原则是：一次只能触发一个事件，而onblur优先级别高于onclick，input在失去焦点后触发onblur，就不会再触发下面的onclick事件了，这就让人很无奈了。后来经过查阅，发现将onmousedown替代onclick，即可解决这样的冲突。下面，我们来看下具体的js代码实现吧：

  //用户选择提示框
    $('#ProductPerson').click(function () {
        GetUser($(this).val());
        $('#P_Select').removeClass('hide');
    });
    $('#ProductPerson').bind('input propertychange', function () {
        GetUser($(this).val());
        $('#P_Select').removeClass('hide');
    });
    //使用ajax向后台发送数据请求
    function GetUser(key) {
        $.ajax({
            url: '/ASNPsm/GetUser',
            type: 'post',
            data: { key: key },
            success: function (res) {
                var html = '';
                if (res.length == 0) {
                    $('#P_Select').html('<div class="form-control ProductPerson">抱歉，不存在该用户！</div>');
                }
                else {
                    for (var i = 0; i < res.length; i++) {
                        html += '<div id=p_for_' + i + ' οnmοusedοwn=SelectUser(' + i + ') class="form-control ProductPerson">' + res[i].TrueName + '</div>';
                    }
                    $('#P_Select').html(html);
                }

            }
        });
    }
    //触发智能响应
    function SelectUser(i) {
        var text = $('#p_for_' + i).text();
        $('#ProductPerson').val(text);
        //$('#P_Select').addClass('hide');
    }
    //onblur失去焦点触发事件(隐藏input的响应导航)
    $('#ProductPerson').blur(function (e) {
        $('#P_Select').addClass('hide');
        //e.stopPropagation();
    });

后台接口就相当简单了，SQL查询：

        /// <summary>
        /// 获得数据列表
        /// </summary>
        public DataSet GetList(string strWhere)
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append("select * ");
            strSql.Append(" FROM Accounts_Users ");
            if (strWhere.Trim() != "")
            {
                strSql.AppendFormat(" where {0}", strWhere);
            }
            return DbHelperSQL.Query(strSql.ToString());
        }

返回相应的Json即可：

        /// <summary>
        /// 智能响应用户
        /// </summary>
        /// <param name="key"></param>
        /// <returns></returns>
        [HttpPost]
        public JsonResult GetUser(string key)
        {
            DataSet ds = user.GetList(" TrueName like '%" + key + "%' ");
            List<Model.Members.Users> uList = new List<Model.Members.Users>();
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                Model.Members.Users model = new Model.Members.Users()
                {
                    TrueName=ds.Tables[0].Rows[i]["TrueName"].ToString()
                };
                uList.Add(model);
            }
            return Json(uList);
        }

最终实现的效果，获取到焦点触发智能响应、点击选项进行赋值、失去焦点隐藏导航，成功实现我们想要的效果。只不过是百度、谷歌、360等实现的是搜索，而我们实现的是根据匹配到的项进行赋值而已，原理是相通的。