当我们打开浏览器时,无论百度、谷歌、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等实现的是搜索,而我们实现的是根据匹配到的项进行赋值而已,原理是相通的。