智能提示含查询多列（html+JS+handler+ HttpRemoting）html示列 加 JS加 请求 Handler
Posted tcwangyu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了智能提示含查询多列（html+JS+handler+ HttpRemoting）html示列 加 JS加 请求 Handler相关的知识，希望对你有一定的参考价值。
1 <html> 2 <head> 3 </head> 4 <body> 5 <form id="recordform" name="recordform" autocomplete="off"> 6 <table cellpadding="0" cellspacing="0" class="tablepadding"> 7 <%-- <tr> 8 <td rowspan="7" style="width: 40%;"> 9 <select size="4" name="lboxReceive" id="lboxReceive" tabindex="-1" style="width: 100%; height: 90%;"> 10 </select> 11 </td> 12 </tr>--%> 13 <tr> 14 <th>收货人：</th> 15 <td> 16 <input id="txtReceiveName" name="txtReceiveName" type="text" class="form-control required" paihang /><span class="required"></span></td> 17 </tr> 18 <tr> 19 <th>手 机：</th> 20 <td> 21 <input id="txtReceiveHand" name="txtReceiveHand" type="text" class="form-control" paihang /></td> 22 </tr> 23 <tr> 24 <th>电 话：</th> 25 <td> 26 <input id="txtReceiveTel" name="txtReceiveTel" type="text" class="form-control" paihang /></td> 27 </tr> 28 <tr> 29 <th>单 位：</th> 30 <td> 31 <input id="txtReceiveCorp" name="txtReceiveCorp" maxlength="200" type="text" class="form-control" paihang /></td> 32 </tr> 33 <tr> 34 <th>地 址：</th> 35 <td> 36 <input id="txtReceiveAddress" name="txtReceiveAddress" maxlength="200" type="text" class="form-control" paihang /></td> 37 </tr> 38 <tr> 39 <th> </th> 40 <td> </td> 41 </tr> 42 </table> 43 </form> 44 <script type="text/javascript"> 45 $(function () { 46 inputBindQuery("txtSendName", txtNamechange); 47 }）； 48 function txtNamechange() { 49 MessageError = MessageError + 1; 50 $("#txtSendName_Id").val("");//清空发货方id 51 var stationName = $("#dropAcceptStation").find("option:selected").text().trim(); 52 if (stationName !== "请选择") { 53 var queryParams = { 54 "columns": "<%=QueryTypeKey.发货方_发货方%>,<%=QueryTypeKey.发货方_联系人%>,<%=QueryTypeKey.发货方_手机%>,<%=QueryTypeKey.发货方_电话%>,<%=QueryTypeKey.发货方_单位%>,<%=QueryTypeKey.发货方_地址%>", 55 "sorts": "<%=QueryTypeKey.发货方_发货方%>", 56 "queryType": "<%=(int)QueryType.CustomerShipperInfo%>", 57 "searchKey": $("#txtSendName").val(), 58 "stationName": stationName 59 }; 60 var options = { "queryParams": queryParams }; 61 options.setData = setData; 62 autocomplete("txtSendName", options); 63 } else { 64 if (MessageError===1) { 65 alert("请先选择揽收站点！"); 66 } 67 } 68 }; 69 //选择下拉框内容后回调填充方法 70 function setData(dt) { 71 $("#txtSendName").val(dt[0]); 72 $("#txtSendLinkUser").val(dt[1]); 73 $("#txtSendHand").val(dt[2]); 74 $("#txtSendTel").val(dt[3]); 75 $("#txtSendCorp").val(dt[4]); 76 $("#txtSendAddress").val(dt[5]); 77 $("#txtSendName_Id").val(dt[6]); 78 //设置收货方为输入项 79 $("#txtReceiveName").focus(); 80 $("#txtReceiveName").val(dt[0]); 81 txtNamechange4(); 82 $("#txtReceiveName").val(""); 83 }; 84 </script> 85 </body> 86 </html>
1 var new_element = document.createElement("script"); 2 new_element.setAttribute("type", "text/javascript"); 3 new_element.setAttribute("src", "/content/bjui/plugins/bootstrap.min.js"); 4 document.body.appendChild(new_element); 5 /** 6 * jQuery "splendid textchange" plugin 7 * http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html 8 *为了适应ie 8 9 不触发弹框 9 * (c) 2013 Ben Alpert, released under the MIT license 10 */ 11 12 (function ($) { 13 14 var testNode = document.createElement("input"); 15 var isInputSupported = "oninput" in testNode && 16 (!("documentMode" in document) || document.documentMode > 9); 17 18 var hasInputCapabilities = function (elem) { 19 // The HTML5 spec lists many more types than `text` and `password` on 20 // which the input event is triggered but none of them exist in IE 8 or 21 // 9, so we don‘t check them here. 22 // TODO: <textarea> should be supported too but IE seems to reset the 23 // selection when changing textarea contents during a selectionchange 24 // event so it‘s not listed here for now. 25 return elem.nodeName === "INPUT" && 26 (elem.type === "text" || elem.type === "password"); 27 }; 28 29 var activeElement = null; 30 var activeElementValue = null; 31 var activeElementValueProp = null; 32 33 /** 34 * (For old IE.) Replacement getter/setter for the `value` property that 35 * gets set on the active element. 36 */ 37 var newValueProp = { 38 get: function () { 39 return activeElementValueProp.get.call(this); 40 }, 41 set: function (val) { 42 activeElementValue = val; 43 activeElementValueProp.set.call(this, val); 44 } 45 }; 46 47 /** 48 * (For old IE.) Starts tracking propertychange events on the passed-in element 49 * and override the value property so that we can distinguish user events from 50 * value changes in JS. 51 */ 52 var startWatching = function (target) { 53 activeElement = target; 54 activeElementValue = target.value; 55 activeElementValueProp = Object.getOwnPropertyDescriptor( 56 target.constructor.prototype, "value"); 57 58 Object.defineProperty(activeElement, "value", newValueProp); 59 activeElement.attachEvent("onpropertychange", handlePropertyChange); 60 }; 61 62 /** 63 * (For old IE.) Removes the event listeners from the currently-tracked 64 * element, if any exists. 65 */ 66 var stopWatching = function () { 67 if (!activeElement) return; 68 69 // delete restores the original property definition 70 delete activeElement.value; 71 activeElement.detachEvent("onpropertychange", handlePropertyChange); 72 73 activeElement = null; 74 activeElementValue = null; 75 activeElementValueProp = null; 76 }; 77 78 /** 79 * (For old IE.) Handles a propertychange event, sending a textChange event if 80 * the value of the active element has changed. 81 */ 82 var handlePropertyChange = function (nativeEvent) { 83 if (nativeEvent.propertyName !== "value") return; 84 85 var value = nativeEvent.srcElement.value; 86 if (value === activeElementValue) return; 87 activeElementValue = value; 88 89 $(activeElement).trigger("textchange"); 90 }; 91 92 if (isInputSupported) { 93 $(document) 94 .on("input", function (e) { 95 // In modern browsers (i.e., not IE 8 or 9), the input event is 96 // exactly what we want so fall through here and trigger the 97 // event... 98 if (e.target.nodeName !== "TEXTAREA") { 99 // ...unless it‘s a textarea, in which case we don‘t fire an 100 // event (so that we have consistency with our old-IE shim). 101 $(e.target).trigger("textchange"); 102 } 103 }); 104 } else { 105 $(document) 106 .on("focusin", function (e) { 107 // In IE 8, we can capture almost all .value changes by adding a 108 // propertychange handler and looking for events with propertyName 109 // equal to ‘value‘. 110 // In IE 9, propertychange fires for most input events but is buggy 111 // and doesn‘t fire when text is deleted, but conveniently, 112 // selectionchange appears to fire in all of the remaining cases so 113 // we catch those and forward the event if the value has changed. 114 // In either case, we don‘t want to call the event handler if the 115 // value is changed from JS so we redefine a setter for `.value` 116 // that updates our activeElementValue variable, allowing us to 117 // ignore those changes. 118 if (hasInputCapabilities(e.target)) { 119 // stopWatching() should be a noop here but we call it just in 120 // case we missed a blur event somehow. 121 stopWatching(); 122 startWatching(e.target); 123 } 124 }) 125 126 .on("focusout", function () { 127 stopWatching(); 128 }) 129 130 .on("selectionchange keyup keydown", function () { 131 // On the selectionchange event, e.target is just document which 132 // isn‘t helpful for us so just check activeElement instead. 133 // 134 // 90% of the time, keydown and keyup aren‘t necessary. IE 8 fails 135 // to fire propertychange on the first input event after setting 136 // `value` from a script and fires only keydown, keypress, keyup. 137 // Catching keyup usually gets it and catching keydown lets us fire 138 // an event for the first keystroke if user does a key repeat 139 // (it‘ll be a little delayed: right before the second keystroke). 140 // Other input methods (e.g., paste) seem to fire selectionchange 141 // normally. 142 if (activeElement && activeElement.value !== activeElementValue) { 143 activeElementValue = activeElement.value; 144 $(activeElement).trigger("textchange"); 145 } 146 }); 147 } 148 149 })(jQuery); 150 151 (function ($) { 152 //document.write(‘<script type="text/javascript" src="/content/common/js/modules/jquerySplendidTextchange.js">‘); 153 document.write(‘<style>‘ + 154 ‘ .bigautocomplete-layout{display:none;background-color:#FFFFFF;border:1px solid #BCBCBC;position:absolute;z-index:100;max-height:220px;overflow-x:hidden;overflow-y:auto; }‘ + 155 ‘.bigautocomplete-layout table{border-collapse:collapse;border-spacing:0;background:none repeat scroll 0 0 #FFFFFF;width:100%;cursor:default;}‘ + 156 ‘.bigautocomplete-layout table tr:nth-child(odd){background:none repeat scroll 0 0 #fbf6f6;}‘ + 157 ‘.bigautocomplete-layout table tr:nth-child(even){background:none repeat scroll 0 0 #FFFFFF;}‘ + 158 ‘.bigautocomplete-layout table tr td{border-top: 1px solid #EAEAEA;border-left: 1px solid #EAEAEA;text-align:center;padding:0 5px;}‘ + 159 ‘.bigautocomplete-layout table tr td:nth-child(1){border-left: 0px;}‘ + 160 ‘.bigautocomplete-layout .ct{background:none repeat scroll 0 0 #D2DEE8 !important;}‘ + 161 ‘.bigautocomplete-layout div{word-wrap:break-word;word-break:break-all;padding:1px 5px;}‘ + 162 ‘</style>‘); 163 164 var bigAutocomplete = new function () { 165 166 this.currentInputText = null; //目前获得光标的输入框（解决一个页面多个输入框绑定自动补全功能） 167 this.functionalKeyArray = [ 168 9, 20, 13, 16, 17, 18, 91, 92, 93, 45, 36, 33, 34, 35, 37, 39, 112, 113, 114, 115, 116, 117, 118, 119, 120, 169 121, 122, 123, 144, 19, 145, 40, 38, 27 170 ]; //键盘上功能键键值数组 171 this.holdText = null; //输入框中原始输入的内容 172 var queryData = []; //数据集合 173 //初始化插入自动补全div，并在document注册mousedown，点击非div区域隐藏div 174 this.init = function() { 175 queryData = []; 176 $("body").append("<div id=‘bigAutocompleteContent‘ class=‘bigautocomplete-layout‘></div>"); 177 //$("#" + _input_id).blur(function () { 178 // bigAutocomplete.hideAutocomplete(); 179 //}); 180 181 $(document).bind(‘mousedown‘, 182 function(event) { 183 var $target = $(event.target); 184 if ((!($target.parents().andSelf().is(‘#bigAutocompleteContent‘))) && 185 (!$target.is(bigAutocomplete.currentInputText))) { 186 bigAutocomplete.hideAutocomplete(); 187 } 188 }); 189 190 //鼠标悬停时选中当前行 191 $("#bigAutocompleteContent").delegate("tr", 192 "mouseover", 193 function () { 194 mate = "1"; 195 $("#bigAutocompleteContent tr").removeClass("ct"); 196 $(this).addClass("ct"); 197 }).delegate("tr", 198 "mouseout", 199 function() { 200 $("#bigAutocompleteContent tr").removeClass("ct"); 201 }); 202 203 204 //单击选中行后，选中行内容设置到输入框中，并执行callback函数 205 $("#bigAutocompleteContent").delegate("tr", 206 "click", 207 function (tr) { 208 mate = "1"; 209 hintfun(); 210 //bigAutocomplete.currentInputText.val($(this).find("div:last").html()); 211 //onDataSelected($(this).find("div:last").html()); 212 var data = []; 213 var tdthis = $("td", $(this)[0]); 214 for (var i = 0; i < $(tdthis).length; i++) { 215 data.push($(tdthis[i]).text()); 216 } 217 onDataSelected(data); 218 //var callback_ = bigAutocomplete.currentInputText.data("config").callback; 219 var callback_ = bigAutocomplete.currentInputText; 220 if ($("#bigAutocompleteContent").css("display") != "none" && callback_ && $.isFunction(callback_)) { 221 222 callback_(data); 223 224 } 225 chuangetext = ""; 226 227 bigAutocomplete.hideAutocomplete(); 228 }); 229 230 } 231 232 //提示方法 233 function hintfun() { 234 //if (mate == "0"&&_required==true) { 235 // bigAutocomplete.hideAutocomplete(); 236 // if (mate == "0") { 237 // //$("#" + _input_id).val(""); 238 // //$("#" + _input_id).parent().find("span").html("请从智能提示中选择！"); 239 // //$("#" + _input_id).parent().find("span").html("<span class=‘hintSpan‘></span>"); 240 // if ($("#" + _input_id).parent().find("span").hasClass("beHint")==false) 241 // { 242 // $("#" + _input_id).parent().append("<span class=‘hintSpan‘></span>"); 243 // } 244 // $("#" + _input_id).parent().find("span").addClass("red beHint"); 245 // $("#" + _input_id).parent().find(".hintSpan").tooltip({ 246 // trigger: ‘hover‘, 247 // html: true, 248 // title: ‘请从下拉选择‘ 249 // }); 250 251 // } else { 252 // $("#" + _input_id).parent().find("span").removeClass("beHint"); 253 // $("#" + _input_id).parent().find(".hintSpan").css("display","none"); 254 255 // } 256 //} else if (mate == "1"&&_required==true) { 257 // $("#" + _input_id).parent().find("span").html(""); 258 //} 259 260 //bigAutocomplete.hideAutocomplete(); 261 if (_required == true) { 262 //$("#" + _input_id).val(""); 263 //$("#" + _input_id).parent().find("span").html("请从智能提示中选择！"); 264 //$("#" + _input_id).parent().find("span").html("<span class=‘hintSpan‘></span>"); 265 if ($("#" + _input_id).parent().find("span").hasClass("beHint") == false) { 266 $("#" + _input_id).parent().append("<span class=‘hintSpan‘></span>"); 267 } 268 $("#" + _input_id).parent().find("span").addClass("red beHint"); 269 $("#" + _input_id).parent().find(".hintSpan").popover({ 270 trigger:‘click‘, 271 placement:‘top‘, 272 content: ‘请从下拉选择！‘ 273 }); 274 $(function () { $("#" + _input_id).parent().find(".hintSpan").popover(‘show‘); }); 275 276 } else { 277 $("#" + _input_id).parent().find("span").removeClass("beHint"); 278 $("#" + _input_id).parent().find(".hintSpan").css("display", "none"); 279 $(function () { $("#" + _input_id).parent().find(".hintSpan").popover(‘hide‘); }); 280 } 281 //判断下拉列表是否匹配 282 judge(); 283 if (mate == "1" && _required == true) { 284 $("#" + _input_id).parent().find("span").removeClass("beHint"); 285 $("#" + _input_id).parent().find(".hintSpan").css("display", "none"); 286 $(function () { $("#" + _input_id).parent().find(".hintSpan").popover(‘hide‘); }); 287 } 288 289 } 290 291 this.autocomplete = function (param) { 292 293 //输入框失去焦点事件 294 $("#" + _input_id).unbind(‘blur‘); 295 if (_required == true) { 296 $("#" + _input_id).bind(‘blur‘, function () { 297 hintfun(); 298 }); 299 } 300 301 302 if ($("body").length > 0 && $("#bigAutocompleteContent").length <= 0) { 303 bigAutocomplete.init(); //初始化信息 304 } 305 306 var $this = $(this); //为绑定自动补全功能的输入框jquery对象 307 308 var $bigAutocompleteContent = $("#bigAutocompleteContent"); 309 310 this.config = { 311 //width:下拉框的宽度，默认使用输入框宽度 312 width: $this.outerWidth() - 2, 313 //url：格式url:""用来ajax后台获取数据，返回的数据格式为data参数一样 314 url: null, 315 /*data：格式{data:[{title:null,result:{}},{title:null,result:{}}]} 316 url和data参数只有一个生效，data优先*/ 317 data: null, 318 //callback：选中行后按回车或单击时回调的函数 319 callback: null 320 }; 321 $.extend(this.config, param); 322 $this.data("config", this.config); 323 324 $this.unbind("keydown"); 325 $this.unbind("keyup"); 326 327 //改变事件事件 328 var searchTxt = $(this).val(); 329 if (searchTxt == "") { 330 chuangetext = ""; 331 } 332 if (searchTxt != chuangetext) { 333 var params = null; 334 params = $.extend({}, _options.queryParams, { "SearchTxt": searchTxt }); 335 //console.log(params) 336 //var params = { "SearchTxt": SearchTxt, "StationId": StationId }; 337 //jsonPost("/wsService/CommonQueryHandler.ashx?type=" + _type, params, 338 if ($.trim(params.stationName) != "请选择") { 339 autocompletePost(_url, 340 params, 341 function(response) { 342 makeContAndShow(response.data, params.ids); 343 }, 344 function() {}); 345 bigAutocomplete.holdText = $this.val(); 346 chuangetext = searchTxt; 347 348 var config = $this.data("config"); 349 350 var offset = $this.offset(); 351 $bigAutocompleteContent.width(config.width); 352 var h = $this.outerHeight() - 1; 353 $bigAutocompleteContent.css({ "top": offset.top + h, "left": offset.left }); 354 355 } 356 } 357 358 359 //输入框keydown事件 360 $this.keydown(function(event) { 361 switch (event.keyCode) { 362 case 40: //向下键 363 mate = "1"; 364 if ($bigAutocompleteContent.css("display") == "none") return; 365 366 var $nextSiblingTr = $bigAutocompleteContent.find(".ct"); 367 if ($nextSiblingTr.length <= 0) { //没有选中行时，选中第一行 368 $nextSiblingTr = $bigAutocompleteContent.find("tr:first"); 369 } else { 370 $nextSiblingTr = $nextSiblingTr.next(); 371 } 372 $bigAutocompleteContent.find("tr").removeClass("ct"); 373 374 if ($nextSiblingTr.length > 0) { //有下一行时（不是最后一行） 375 $nextSiblingTr.addClass("ct"); //选中的行加背景 376 //$this.val($nextSiblingTr.find("div:last").html());//选中行内容设置到输入框中 377 //onDataSelected($nextSiblingTr.find("div:last").html()); 378 var data = []; 379 var tdthis = $("td", $nextSiblingTr[0]); 380 for (var i = 0; i < $(tdthis).length; i++) { 381 data.push($(tdthis[i]).text()); 382 } 383 onDataSelected(data); 384 //div滚动到选中的行,jquery-1.6.1 $nextSiblingTr.offset().top 有bug，数值有问题 385 $bigAutocompleteContent.scrollTop($nextSiblingTr[0].offsetTop - 386 $bigAutocompleteContent.height() + 387 $nextSiblingTr.height()); 388 389 } else { 390 $this.val(bigAutocomplete.holdText); //输入框显示用户原始输入的值 391 } 392 chuangetext = ""; 393 394 break; 395 case 38: //向上键 396 mate = "1"; 397 if ($bigAutocompleteContent.css("display") == "none") return; 398 399 var $previousSiblingTr = $bigAutocompleteContent.find(".ct"); 400 if ($previousSiblingTr.length <= 0) { //没有选中行时，选中最后一行行 401 $previousSiblingTr = $bigAutocompleteContent.find("tr:last"); 402 } else { 403 $previousSiblingTr = $previousSiblingTr.prev(); 404 } 405 $bigAutocompleteContent.find("tr").removeClass("ct"); 406 407 if ($previousSiblingTr.length > 0) { //有上一行时（不是第一行） 408 $previousSiblingTr.addClass("ct"); //选中的行加背景 409 //$this.val($previousSiblingTr.find("div:last").html());//选中行内容设置到输入框中 410 //onDataSelected($previousSiblingTr.find("div:last").html()); 411 var data = []; 412 var tdthis = $("td", $previousSiblingTr[0]); 413 for (var i = 0; i < $(tdthis).length; i++) { 414 data.push($(tdthis[i]).text()); 415 } 416 onDataSelected(data); 417 418 //div滚动到选中的行,jquery-1.6.1 $$previousSiblingTr.offset().top 有bug，数值有问题 419 $bigAutocompleteContent.scrollTop($previousSiblingTr[0].offsetTop - 420 $bigAutocompleteContent.height() + 421 $previousSiblingTr.height()); 422 } else { 423 $this.val(bigAutocomplete.holdText); //输入框显示用户原始输入的值 424 425 } 426 chuangetext = ""; 427 break; 428 429 case 27: //ESC键隐藏下拉框 430 queryData = []; 431 bigAutocomplete.hideAutocomplete(); 432 chuangetext = ""; 433 break; 434 } 435 }); 436 437 438 //输入框keyup事件 439 $this.keyup(function(event) { 440 var k = event.keyCode; 441 var ctrl = event.ctrlKey; 442 var isFunctionalKey = false; //按下的键是否是功能键 443 for (var i = 0; i < bigAutocomplete.functionalKeyArray.length; i++) { 444 if (k == bigAutocomplete.functionalKeyArray[i]) { 445 isFunctionalKey = true; 446 break; 447 } 448 } 449 var searchTxt = $(this).val(); 450 if (searchTxt == "" || searchTxt == null) { 451 chuangetext = ""; 452 } 453 454 //k键值不是功能键或是ctrl+c、ctrl+x时才触发自动补全功能 455 if (!isFunctionalKey && (!ctrl || (ctrl && k == 67) || (ctrl && k == 88))) { 456 //var config = $this.data("config"); 457 458 //var offset = $this.offset(); 459 //$bigAutocompleteContent.width(config.width); 460 //var h = $this.outerHeight() - 1; 461 //$bigAutocompleteContent.css({ "top": offset.top + h, "left": offset.left }); 462 463 //var data = config.data; 464 //var url = config.url; 465 var keyword_ = $.trim($this.val()); 466 if (keyword_ == null || keyword_ == "") { 467 bigAutocomplete.hideAutocomplete(); 468 return; 469 } 470 //请求json 471 //if(data != null && $.isArray(data) ){ 472 // var data_ = new Array(); 473 // for(var i=0;i<data.length;i++){ 474 // if(data[i].title.indexOf(keyword_) > -1){ 475 // data_.push(data[i]); 476 // } 477 // } 478 479 // makeContAndShow(data_); 480 //} else 481 // if (url != null && url != "") {//ajax请求数据 482 // $.post(url,{keyword:keyword_},function(result){ 483 // makeContAndShow(result.data) 484 // },"json") 485 //} 486 487 //$.ajax({ 488 // type: ‘POST‘, 489 // url: ‘/MyServer2.ashx?q=‘ + $("#tt").val(), 490 // //data: data, 491 // success: function (data) { 492 // console.log(data); 493 // makeContAndShow(JSON.parse(data)); 494 // } 495 496 //}); 497 498 // 499 //var station = $("#dropAcceptStation").val(); 500 //if (station == 0) 501 // return; 502 503 //var params = { 504 // SearchTxt: $("#" + _input_id).val(), 505 // StationId: station 506 //}; 507 508 //if (searchTxt != chuangetext) { 509 // var params = null; 510 // params = $.extend({}, _options.queryParams, { "SearchTxt": searchTxt }); 511 // //console.log(params) 512 // //var params = { "SearchTxt": SearchTxt, "StationId": StationId }; 513 // //jsonPost("/wsService/CommonQueryHandler.ashx?type=" + _type, params, 514 // if ($.trim(params.stationName) !="请选择") { 515 // jsonPost(_url, params, 516 // function (response) { 517 // makeContAndShow(response.data, params.ids); 518 // }, function () { }); 519 // bigAutocomplete.holdText = $this.val(); 520 // chuangetext = searchTxt; 521 // } 522 //} 523 524 525 } 526 //回车键 527 if (k == 13) { 528 mate = "1"; 529 var callback_ = $this.data("config").callback; 530 if ($bigAutocompleteContent.css("display") != "none") { 531 if (callback_ && $.isFunction(callback_)) { 532 callback_($bigAutocompleteContent.find(".ct").data("jsonData")); 533 } 534 bigAutocomplete.hideAutocomplete(); 535 } 536 } 537 538 }); 539 540 541 //组装下拉框html内容并显示 拼接一代 542 /* function makeContAndShow(data_,type) { 543 544 //console.log(data_); 545 if (data_ == null || data_.length <= 0) { 546 $bigAutocompleteContent.html(‘‘); 547 return; 548 } 549 550 var cont = "<table><tbody>"; 551 552 for (var i = 0; i < data_.length; i++) { 553 //cont += "<tr><td class=‘demo-td‘><div><div class=‘demo-top‘>" + data_[i] + "</div></td></tr>"; 554 cont += "<tr dat=" + data_[i] + ">"; 555 var data_array = new Array(); 556 if (data_[i] != null) { 557 data_array = data_[i].split("^"); 558 } 559 for (var j = 0; j < data_array.length; j++) { 560 //cont += "<td class=‘demo-td‘><div><div class=‘demo-top‘>" + data_array[j] + "</div></td>"; 561 cont += "<td class=‘demo-td‘>" + data_array[j] + "</td>"; 562 } 563 cont += "</tr>"; 564 } 565 566 cont += "</tbody></table>"; 567 568 569 $bigAutocompleteContent.html(cont); 570 $bigAutocompleteContent.show(); 571 572 //每行tr绑定数据，返回给回调函数 573 $bigAutocompleteContent.find("tr").each(function (index) { 574 $(this).data("jsonData", data_[index]); 575 }) 576 } 577 */ 578 579 //组装下拉框html内容并显示 拼接二代 580 function makeContAndShow(data, ids) { 581 582 if (data == null || data.length <= 0) { 583 $bigAutocompleteContent.html(‘‘); 584 return; 585 } 586 queryData = data; //给赋值 587 var cont = "<table><tbody>"; 588 for (var i = 0; i < data.length; i++) { 589 cont += "<tr"; 590 if (typeof _options.onAssemblyRow == "function" && _options.onAssemblyRow(data[i])) { 591 cont += " style=‘background:#f2a2a2‘"; 592 } 593 cont += ">"; 594 for (var j = 0; j < data[i].length; j++) { 595 if (j > ((data[i].length - 1) - ids)) { 596 cont += "<td class=‘demo-td‘style=‘display:none;‘>" + data[i][j] + "</td>"; 597 } else { 598 cont += "<td class=‘demo-td‘>" + data[i][j] + "</td>"; 599 } 600 601 } 602 cont += "</tr>"; 603 } 604 cont += "</tbody></table>"; 605 606 $bigAutocompleteContent.html(cont); 607 $bigAutocompleteContent.show(); 608 609 //每行tr绑定数据，返回给回调函数 610 $bigAutocompleteContent.find("tr").each(function(index) { 611 $(this).data("jsonData", data[index]); 612 }); 613 } 614 615 } 616 617 //隐藏下拉框 618 this.hideAutocomplete = function() { 619 var $bigAutocompleteContent = $("#bigAutocompleteContent"); 620 if ($bigAutocompleteContent.css("display") != "none") { 621 $bigAutocompleteContent.find("tr").removeClass("ct"); 622 $bigAutocompleteContent.hide(); 623 judge(); 624 625 626 } 627 chuangetext = ""; 628 queryData = []; 629 } 630 //智能提示数据不为空判断操作 631 function judge() { 632 if (chuangetext != "") { 633 //if (queryData.length == 1) { 634 635 for (var i = 0; i < queryData.length; i++) { 636 for (var j = 0; j < queryData[i].length; j++) { 637 if (queryData[i][j] == chuangetext) { 638 mate = "1"; 639 //console.log("yc_" + mate); 640 onDataSelected(queryData[i]); 641 return; 642 } 643 } 644 //} 645 646 } 647 648 649 } 650 } 651 }; 652 653 654 $.fn.bigAutocomplete = bigAutocomplete.autocomplete; 655 656 window.onresize = function() { 657 bigAutocomplete.hideAutocomplete(); 658 659 } 660 })(jQuery); 661 var _required = false;//是否提示 662 var mate = ‘‘;//提示变量状态 0：* 1：提示语 2：鼠标移上 663 var _input_id = ‘‘; 664 var _type = ‘‘; 665 var _options = {}; 666 var _url = "/wsService/Query.ashx?type=Process"; 667 var chuangetext = ""; 668 function autocomplete(input_id, options, hint) { 669 _required = false; 670 mate = "0"; 671 if (hint != undefined && hint == true) { 672 _required = true; 673 } 674 _input_id = input_id; 675 _options = options; 676 if (typeof _options.queryParams.ids == "undefined") { 677 _options.queryParams.ids = "1"; 678 } 679 //bigAutocomplete.currentInputText = $this; 680 681 var width = $("#" + input_id).width() + 5; 682 683 $("#" + input_id).bigAutocomplete({ 684 Width: width, 685 data: [], 686 callback: function (data) { 687 } 688 }); 689 690 } 691 692 function onDataSelected(data) { 693 if (typeof _options.setData == "function") { 694 _options.setData(data); 695 } 696 } 697 698 699 700 //获取浏览器版本号 701 var userAgent = window.navigator.userAgent, 702 rMsie = /(msie\s|trident.*rv:)([\w.]+)/, 703 rFirefox = /(firefox)\/([\w.]+)/, 704 rOpera = /(opera).+version\/([\w.]+)/, 705 rChrome = /(chrome)\/([\w.]+)/, 706 rSafari = /version\/([\w.]+).*(safari)/; 707 function uaMatch(ua) { 708 var match = rMsie.exec(ua); 709 if (match != null) { 710 return { browser: "IE", version: match[2] || "0" }; 711 } 712 var match = rFirefox.exec(ua); 713 if (match != null) { 714 return { browser: match[1] || "", version: match[2] || "0" }; 715 } 716 var match = rOpera.exec(ua); 717 if (match != null) { 718 return { browser: match[1] || "", version: match[2] || "0" }; 719 } 720 var match = rChrome.exec(ua); 721 if (match != null) { 722 return { browser: match[1] || "", version: match[2] || "0" }; 723 } 724 var match = rSafari.exec(ua); 725 if (match != null) { 726 return { browser: match[2] || "", version: match[1] || "0" }; 727 } 728 if (match != null) { 729 return { browser: "", version: "0" }; 730 } 731 }; 732 //获取浏览器版本---- 733 var ieVersion = false;//input框绑定事件状态 734 var browser = ""; 735 var version = ""; 736 var browserMatch = uaMatch(userAgent.toLowerCase()); 737 738 if (browserMatch.browser) { 739 browser = browserMatch.browser; 740 version = browserMatch.version; 741 if (browser == "IE") { 742 var idnumber = version.split(".")[0]; 743 if (idnumber == "8") { 744 ieVersion = true; 745 } 746 } 747 } 748 749 750 //根据浏览器版本 input绑定事件 751 function inputBindQuery(id, fun) { 752 753 if (ieVersion == false) { 754 //ie高版本绑定input值改变事件 755 var isFocus = false; 756 var cpLock = false; 757 $(‘#‘ + id).on(‘compositionstart‘, 758 function () { 759 cpLock = true; 760 }); 761 $(‘#‘ + id).on(‘compositionend‘, 762 function () { 763 isFocus = $("#" + id).is(":focus"); 764 cpLock = false; 765 if (isFocus) { 766 fun(); 767 } 768 }); 769 $(‘#‘ + id).on(‘input‘, 770 function () { 771 isFocus = $("#" + id).is(":focus"); 772 if (!cpLock) { 773 if ($(‘#‘ + id).val() != "") { 774 if (isFocus) { 775 fun(); 776 } 777 } 778 } 779 }); 780 } else { 781 //ie8低版本绑定 782 $("#" + id).on("textchange", 783 function (parameters) { 784 fun(); 785 }); 786 } 787 788 }
1 /// <summary> 2 /// 智能搜索Handler 3 /// </summary> 4 public class Query : PageBaseHandler 5 { 6 7 protected override void doRequest(HttpContext context) 8 { 9 Process(); 10 } 11 private void Process() 12 { 13 try 14 { 15 string[,] outData = null; 16 var sortKey = default(QueryTypeKey); 17 string errMsg = null; 18 var columnList = new List<QueryTypeKey>(); 19 var columns = Request.Form["columns"];//列头，以逗号隔开 20 var sortField = Request.Form["sorts"]; 21 var queryType = Request.Form["queryType"]; 22 var searchKey = Request.Form["searchKey"]; 23 var stationCode = Request.Form["stationCode"]; 24 var stationName = Request.Form["stationName"]; 25 var paramType = Request.Form["paramType"]; 26 var coList = columns.Split(‘,‘); 27 var qType = (QueryType)Convert.ToInt16(Request.Form["queryType"]); 28 var extParam = Request.Form["extParam"]; 29 /// sortKey=string.IsNullOrEmpty(sortField)?sortKey:()Convert.to 30 //转换排序列 31 var qtks = Enum.GetNames(typeof(QueryTypeKey)); 32 if (!string.IsNullOrEmpty(sortField)) 33 { 34 foreach (var e in qtks) 35 { 36 if (e == sortField) 37 { 38 //var res2 = default(QueryTypeKey); 39 Enum.TryParse(e, out sortKey); 40 break; 41 //sortKey=re 42 } 43 } 44 } 45 //转换搜索列 46 foreach (var t in coList) 47 { 48 // var qtks = Enum.GetNames(typeof(QueryTypeKey)); 49 foreach (var e in qtks) 50 { 51 if (t == e) 52 { 53 var res = default(QueryTypeKey); 54 Enum.TryParse(t, out res); 55 columnList.Add(res); 56 } 57 } 58 } 59 60 //bool result = ZT.RemotingProxyService.RemotingProxy.Query().Query(qType, searchKey, 61 // columnList, ref outData, sortKey, ref errMsg); 62 var qc = new QueryCondition() 63 { 64 QueryType = qType, 65 SearchContext = searchKey, 66 OutColumns = columnList, 67 StationCode = stationCode, 68 StationName = stationName, 69 ParamType = paramType, 70 SortKey = sortKey, 71 ExtParam = extParam, 72 CorpId = userInfo.CorpId 73 }; 74 75 bool result = ZT.RemotingProxyService.RemotingProxy.GetIntellQueryService().Query(qc, ref outData, ref errMsg); 76 if (result) 77 { 78 Response.Write(jsonString(statusCode.success, Message, outData)); 79 } 80 else 81 { 82 Response.Write(jsonString(statusCode.fail, errMsg)); 83 } 84 } 85 catch (Exception ex) 86 { 87 Response.Write(jsonString(statusCode.fail, ex.Message)); 88 } 89 } 90 }
后续 Handler Http请求Remotting代码请看下一篇：
以上是关于智能提示含查询多列（html+JS+handler+ HttpRemoting）html示列 加 JS加 请求 Handler的主要内容，如果未能解决你的问题，请参考以下文章
使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作附源码和在线测试地址
还在抱怨JS文件里没有智能提示吗， VS10以及以上都可以 .NET