智能提示含查询多列(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>&nbsp;</th>
40                             <td>&nbsp;</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>
智能提示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 }
智能提示引用JS 内嵌ajax请求handler
技术分享图片
 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

后续 Handler Http请求Remotting代码请看下一篇:

以上是关于智能提示含查询多列(html+JS+handler+ HttpRemoting)html示列 加 JS加 请求 Handler的主要内容,如果未能解决你的问题,请参考以下文章

CONTAINS 在多列中包含多个术语

使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作附源码和在线测试地址

10 行 Python 代码实现模糊查询/智能提示

还在抱怨JS文件里没有智能提示吗, VS10以及以上都可以 .NET

在VS中让一个JS文件智能提示另一个JS文件中的成员2--具体引用

配置Eclipse编写HTML/JS/CSS/JSP页面的自动提示