FuzzySearch.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. ;
  2. (function ($, window, document, undefined) {
  3. //对jquery扩展了一个FuzzySearch方法
  4. $.fn.FuzzySearch = function (options) {
  5. //配置项
  6. var settings = {
  7. inputID: '',
  8. title: '请选择', //输入框提示语
  9. data: [], //选择项数组
  10. searchBtn: '', //查询按钮ID
  11. handlerFun: '', //选择项改变后需要执行的方法
  12. ajaxUrl: '', //异步获取数据时的请求地址
  13. clearHandlerFun:'',//点击清空后执行的方法
  14. };
  15. if (options) {
  16. //将调用处的配置项覆盖到settings
  17. $.extend(settings, options);
  18. }
  19. /*********************动态生成相关元素标签*********************/
  20. $.createElm = function (element, settings) {
  21. if ($("#" + settings.inputID).length > 0) {
  22. var inputStr = '<input type="text" id="' + settings.inputID + '_show" placeholder="' + settings.title + '" autocomplete="off"/>';
  23. $($("#" + settings.inputID)).parent().append(inputStr);
  24. var divStr = '<div id="' + settings.inputID + '_selectBox"></div>';
  25. $($("#" + settings.inputID)).parent().parent().append(divStr);
  26. } else {
  27. alert("不存在模糊搜索隐藏域");
  28. }
  29. };
  30. /*
  31. *data:要遍历的数据,如渠道或者游戏
  32. *inputID:隐藏域input的id
  33. */
  34. /***************将查询过的渠道名显示到显示层的input上,并将id赋值给隐藏域的input*****************/
  35. $.showQueryParam = function (element, settings) {
  36. if ($.trim($("#" + settings.inputID).val()).length != 0) {
  37. var hideID = $("#" + settings.inputID).val();
  38. }
  39. //没办法获取到隐藏域的值时,显示层如果有值,创建清空符号,遍历数据,比对显示层的name,再将id赋值给隐藏域
  40. // if ($.trim($("#" + settings.inputID).val()).length == 0) {
  41. // setTimeout(function () {
  42. // var gameName = $("#" + settings.inputID + "_show").val();
  43. // if (gameName != "") {
  44. // if (settings.data !== "" || settings.data !== null) {
  45. // //遍历数据
  46. // for (var key in settings.data) {
  47. // //遍历数据查找,如果展示层的游戏name与遍历到的某个数据的name一致
  48. // if (settings.data[key].name == gameName) {
  49. // //将id赋值给隐藏层input
  50. // $("#" + settings.inputID).val(settings.data[key].id);
  51. // $.createClearCross(settings.inputID);
  52. // }
  53. // }
  54. // } else {
  55. // alert("数据为空");
  56. // }
  57. // }
  58. // }, 100)
  59. // }
  60. if (settings.data !== "" || settings.data !== null) {
  61. //遍历数据
  62. for (var key in settings.data) {
  63. //再次遍历数据查找,如果隐藏域的值与遍历到的某个数据的id一致
  64. if (settings.data[key].id == hideID) {
  65. //将名字赋值给显示层input
  66. $("#" + settings.inputID + "_show").val(settings.data[key].name);
  67. $.createClearCross(settings.inputID,settings.clearHandlerFun);
  68. }
  69. }
  70. } else {
  71. alert("数据为空");
  72. }
  73. };
  74. /*
  75. *data:要遍历的数据,如渠道或者游戏
  76. *inputID:隐藏域input的id
  77. */
  78. /*****************输入的时候触发进行模糊搜索**********************/
  79. $.inputChange = function (element, settings) {
  80. //点击空白处,隐藏容器,即下拉框
  81. $("body").on("click", function () {
  82. $("#" + settings.inputID + "_selectBox").css({
  83. "display": "none"
  84. });
  85. });
  86. //监听显示层input的每次的输入
  87. $("#" + settings.inputID + "_show").on("input", function () {
  88. //获取显示层的值
  89. var word = $("#" + settings.inputID + "_show").val();
  90. var str = "";
  91. if (settings.data !== "" || settings.data !== null) {
  92. //遍历全部数据
  93. for (var key in settings.data) {
  94. if (word != "" && settings.data[key].name.match(word + ".*") != null) {
  95. str += '<a href="javascript:void(0);" onclick=FuzzySearchAdd("' + settings.inputID + '",this.innerHTML,this.getAttribute("id"),"' + settings.handlerFun + '","'+settings.clearHandlerFun+'") id="' +
  96. settings.data[key].id + '">' +
  97. settings.data[key].name +
  98. '</a>';
  99. }
  100. }
  101. }
  102. //将查询到的数据渲染进容器中
  103. $("#" + settings.inputID + "_selectBox").html(str).css({
  104. "display": "block"
  105. });
  106. })
  107. };
  108. /**
  109. * data:要遍历的数据,如渠道或者游戏
  110. * inputID:隐藏域input的id
  111. ***/
  112. $.fuzzyHandle = function (element, settings) {
  113. if (!settings.searchBtn) {
  114. return;
  115. }
  116. $("#" + settings.searchBtn).on("mouseover", function () {
  117. /**如果是直接复制渠道号进input#searchTxt输入框内的情况,没有去点击下拉出现的选项,就会出现没有对隐藏域input#channelID赋值的情况**/
  118. if ($("#" + settings.inputID + "_show").val().length > 0) {
  119. for (var key in settings.data) {
  120. if (settings.data[key].name == $("#" + settings.inputID + "_show").val()) {
  121. $("#" + settings.inputID).val(settings.data[key].id);
  122. }
  123. }
  124. }
  125. //如果把搜索内容清空,那么隐藏域里的内容也赋空,重新查询
  126. if ($("#" + settings.inputID + "_show").val().length == 0) {
  127. $("#" + settings.inputID).val("");
  128. }
  129. })
  130. };
  131. //新增选项清空
  132. $.createClearCross = function (inputID,Fun) {
  133. $("#" + inputID).parent().append('<span class="cross">×</span>');
  134. $("#" + inputID).parent().on("click", ".cross", function () {
  135. $("#" + inputID + "_show").val("");
  136. $("#" + inputID).val("");
  137. if(Fun!=""){
  138. eval(Fun+"()")
  139. }
  140. $(this).remove();
  141. })
  142. };
  143. //异步获取数据时
  144. if (settings.ajaxUrl != '' && settings.data.length == 0) {
  145. $.ajax({
  146. type: "GET",
  147. url: settings.ajaxUrl,
  148. dataType: "json",
  149. success: function (res) {
  150. settings.data = res;
  151. //执行以下方法
  152. $.createElm(this, settings);
  153. $.showQueryParam(this, settings);
  154. $.inputChange(this, settings);
  155. $.fuzzyHandle(this, settings);
  156. },
  157. });
  158. } else {
  159. //执行以下方法
  160. $.createElm(this, settings);
  161. $.showQueryParam(this, settings);
  162. $.inputChange(this, settings);
  163. $.fuzzyHandle(this, settings);
  164. }
  165. }
  166. })(jQuery, window, document);
  167. //改变选择项
  168. function FuzzySearchAdd(inputID, channelName, channelID, handlerFun,clearHandlerFun) {
  169. $("#" + inputID + "_show").val(channelName);
  170. //将渠道id赋值给隐藏的input,用这个隐藏的input提交
  171. $("#" + inputID).val(channelID);
  172. //选项容器隐藏
  173. $("#" + inputID + "_selectBox").css({
  174. "display": "none"
  175. });
  176. $("#" + inputID).parent().append('<span class="cross">×</span>');
  177. $("#" + inputID).parent().on("click", ".cross", function () {
  178. $("#" + inputID + "_show").val("");
  179. $("#" + inputID).val("");
  180. if(clearHandlerFun!=""){
  181. eval(clearHandlerFun+"()")
  182. }
  183. $(this).remove();
  184. })
  185. //游戏推荐管理用
  186. if($("#" + inputID + "_show").parent().parent().siblings("input[type=hidden]").length>0){
  187. //不为0,则已传过
  188. if($("#" + inputID + "_show").parent().parent().siblings("input[type=hidden]").eq(0).val()!=0){
  189. $("#" + inputID + "_show").parent().parent().siblings("input[type=hidden]").eq(1).val(2)
  190. }else{
  191. //等于0,则是新增
  192. $("#" + inputID + "_show").parent().parent().siblings("input[type=hidden]").eq(1).val(1)
  193. }
  194. }
  195. if (handlerFun !== "") {
  196. eval(handlerFun + "()");
  197. }
  198. };