asp.net mvc 模拟百度搜索
页面代码：
<td><span>*</span>车牌号码：</td> <td> <div id="search"> <label></label> <input type="text" id="search-text" name="search-text" /> @*<input type="button" id="submit" value="搜索" />*@ <span class="ddPlateNum"></span> </div> </td>
js代码：
//取得div层 var $search = $('#search'); //取得输入框JQuery对象 var $searchInput = $search.find('#search-text'); //取得车牌id var ddId; //关闭浏览器提供给输入框的自动完成 $searchInput.attr('autocomplete', 'off'); //创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置 var $autocomplete = $('<div class="autocomplete"></div>') .hide() .insertAfter('.ddPlateNum'); //清空下拉列表的内容并且隐藏下拉列表区 var clear = function () { $autocomplete.empty().hide(); }; //注册事件，当输入框失去焦点的时候清空下拉列表并隐藏 $searchInput.blur(function () { setTimeout(clear, 500); }); //下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，想百度搜索那样 var selectedItem = null; //timeout的ID var timeoutid = null; //设置下拉项的高亮背景 var setSelectedItem = function (item) { //更新索引变量 selectedItem = item; //按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0 if (selectedItem < 0) { selectedItem = $autocomplete.find('li').length - 1; } else if (selectedItem > $autocomplete.find('li').length - 1) { selectedItem = 0; } //首先移除其他列表项的高亮背景，然后再高亮当前索引的背景 $autocomplete.find('li').removeClass('highlight') .eq(selectedItem).addClass('highlight'); }; var ajax_request = function () { //var name = $("#search-text").val(); //console.log(name); //ajax服务端通信 $.ajax({ url: "/OverLimitDetectBusiness/QueryPlate", //服务器的地址 data: { plateNum: $("#search-text").val(), pageSize: 5, pageIndex: 1 }, //参数 dataType: 'json', //返回数据类型 type: 'POST', //请求类型 success: function (data) { //console.log(data); if (data.infoList.length > 0) { $autocomplete.empty(); //遍历data，添加到自动完成区 $.each(data.infoList, function (index, term) { //创建li标签,添加到下拉列表中 $('<li></li>').text(term.srPlateNum).appendTo($autocomplete) .addClass('clickable') .hover(function () { //下拉列表每一项的事件，鼠标移进去的操作 $(this).siblings().removeClass('highlight'); $(this).addClass('highlight'); selectedItem = index; }, function () { //下拉列表每一项的事件，鼠标离开的操作 $(this).removeClass('highlight'); //当鼠标离开时索引置-1，当作标记 selectedItem = -1; }) .click(function () { //鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中 $searchInput.val(term.srPlateNum); $searchInput.attr("ddIds", term.srDdId); ddId = $("#search-text").attr("ddIds"); $(".ddPlateNum").empty(); //QueryStoreRegByddId(ddId); //alert(ddId); //清空并隐藏下拉列表 $autocomplete.empty().hide(); }); }); //事件注册完毕 //设置下拉列表的位置，然后显示下拉列表 var ypos = $searchInput.position().top; var xpos = $searchInput.position().left; $autocomplete.css('width', $searchInput.css('width')); $autocomplete.css({ 'position': 'relative', 'left': xpos + "px", 'top': ypos + "px" }); setSelectedItem(0); //显示下拉列表 $autocomplete.show(); } } }); }; //对输入框进行事件注册 $searchInput.keyup(function (event) { //字母数字，退格，空格 if (event.keyCode > 40 || event.keyCode == 8 || event.keyCode == 32) { //首先删除下拉列表中的信息 $autocomplete.empty().hide(); clearTimeout(timeoutid); timeoutid = setTimeout(ajax_request, 100); } else if (event.keyCode == 38) { //上 //selectedItem = -1 代表鼠标离开 if (selectedItem == -1) { setSelectedItem($autocomplete.find('li').length - 1); } else { //索引减1 setSelectedItem(selectedItem - 1); } event.preventDefault(); } else if (event.keyCode == 40) { //下 //selectedItem = -1 代表鼠标离开 if (selectedItem == -1) { setSelectedItem(0); } else { //索引加1 setSelectedItem(selectedItem + 1); } event.preventDefault(); } }) .keypress(function (event) { //enter键 if (event.keyCode == 13) { //列表为空或者鼠标离开导致当前没有索引值 if ($autocomplete.find('li').length == 0 || selectedItem == -1) { return; } $searchInput.val($autocomplete.find('li').eq(selectedItem).text()); $autocomplete.empty().hide(); event.preventDefault(); } }) .keydown(function (event) { //esc键 if (event.keyCode == 27) { $autocomplete.empty().hide(); event.preventDefault(); } }); //注册窗口大小改变的事件，重新调整下拉列表的位置 //$(window).resize(function () { // var ypos = $searchInput.position().top; // var xpos = $searchInput.position().left; // $autocomplete.css('width', $searchInput.css('width')); // $autocomplete.css({ // 'position': 'relative', // 'left': xpos + "px", // 'top': ypos + "px" // }); //}); var userIs = false; $("#search-text").on("blur", function (e) { textVerification(plateNum, $(".ddPlateNum"), $("#search-text").val().trim()); //$(".ddPlateNum").empty(); //if ($(this).val() != "") { // var liUserName = $(".autocomplete li"); // for (var i = 0; i < liUserName.length; i++) { // if ($(this).val() == liUserName[i].innerText) { // userIs = true; // } // } // //if (!userIs) { // // $(".ddPlateNum").append("<img src='/Images/validateFalse.png'/>  没有对应的车牌号"); // //} else { // // $(".ddPlateNum").empty(); // //} //} else { //} //setTimeout(function () { // $("#changeUser").hide(); //}, 200); })
控制器代码：
public ActionResult QueryPlate(string plateNum, int pageSize, int pageIndex) { StoreRegData creditInfor = new StoreRegData(); try { using (Entities db = new Entities()) { StoreRegFilterParam storeReg = new StoreRegFilterParam(); storeReg.currentPage = pageIndex - 1; storeReg.itemsPerPage = pageSize; storeReg.srPlateNum = plateNum; creditInfor = store_util.SelectAllPlateName2(storeReg); } } catch (Exception ex) { CSysCfg.WriteLog(ex.Message); } return Json(creditInfor); }
后台代码：
public StoreRegData SelectAllPlateName2(StoreRegFilterParam param) { StoreRegData datas = new StoreRegData(); List<StoreRegInfo> infoList = new List<StoreRegInfo>(); //List<DetectionDataite> info = new List<DetectionDataite>(); int count = 0; try { using (Entities db = new Entities()) { var infos = from p in db.DetectionDataite where p.dd_OverWeight > 0 && (string.IsNullOrEmpty(param.srPlateNum) ? true : p.dd_PlateNum.Contains(param.srPlateNum)) select p; var info2 = param.itemsPerPage == 0 ? infos.ToList() : infos.OrderBy(p => p.dd_Detectionid).Skip(param.itemsPerPage * param.currentPage).Take(param.itemsPerPage).ToList(); count = infos.Count(); foreach (var item in info2) { StoreRegInfo edata = new StoreRegInfo() { srDdId = item.dd_Detectionid, srPlateNum = item.dd_PlateNum }; infoList.Add(edata); } datas.currentPage = param.currentPage; datas.itemCount = count; datas.infoList = infoList; if (param.itemsPerPage != 0) { datas.pageCount = (int)Math.Ceiling((decimal)(count * 1.0 / param.itemsPerPage)); } } return datas; } catch (Exception) { throw; } }
