程序员之家论坛»程序员论坛 › 网站编程 › .NET开发 › 智能提示含查询多列（html+JS+handler+ HttpRemoting） ...
返回列表 发新帖
查看: 2649|回复: 0

[.NET开发] 智能提示含查询多列（html+JS+handler+ HttpRemoting）一、html示列 加 JS加 请求 Handler

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

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

html, handler



上一篇：.net 获取邮箱邮件列表和内容
下一篇：未能加载文件或程序集“***”或它的某一个依赖项，拒绝访问 &amp;lt;解决方法&amp;gt;

相关帖子
回复

使用道具 举报

关于我们 | 移动开发 | java基础教程 | sql数据库学习 | .NET开发 | php是什么 | html代码大全 | 互联网的那点事 | 查看新帖
© 2011-2018 程序员论坛联系邮箱:robert#xiaobei668.com. （网站内容均来自互联网，非本站认同之观点！删除、合作请联系管理员）
Powered by Discuz X3.2 && 程序员之家 . 程序员论坛 运营.