FuzzySearch.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  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. $("#" + settings.searchBtn).on("mouseover", function () {
  114. /**如果是直接复制渠道号进input#searchTxt输入框内的情况,没有去点击下拉出现的选项,就会出现没有对隐藏域input#channelID赋值的情况**/
  115. if ($("#" + settings.inputID + "_show").val().length > 0) {
  116. for (var key in settings.data) {
  117. if (settings.data[key].name == $("#" + settings.inputID + "_show").val()) {
  118. $("#" + settings.inputID).val(settings.data[key].id);
  119. }
  120. }
  121. }
  122. //如果把搜索内容清空,那么隐藏域里的内容也赋空,重新查询
  123. if ($("#" + settings.inputID + "_show").val().length == 0) {
  124. $("#" + settings.inputID).val("");
  125. }
  126. })
  127. };
  128. //新增选项清空
  129. $.createClearCross = function (inputID,Fun) {
  130. $("#" + inputID).parent().append('<span class="cross">×</span>');
  131. $("#" + inputID).parent().on("click", ".cross", function () {
  132. $("#" + inputID + "_show").val("");
  133. $("#" + inputID).val("");
  134. if(Fun!=""){
  135. eval(Fun+"()")
  136. }
  137. $(this).remove();
  138. })
  139. };
  140. //异步获取数据时
  141. if (settings.ajaxUrl != '' && settings.data.length == 0) {
  142. $.ajax({
  143. type: "GET",
  144. url: settings.ajaxUrl,
  145. dataType: "json",
  146. success: function (res) {
  147. settings.data = res;
  148. //执行以下方法
  149. $.createElm(this, settings);
  150. $.showQueryParam(this, settings);
  151. $.inputChange(this, settings);
  152. $.fuzzyHandle(this, settings);
  153. },
  154. });
  155. } else {
  156. //执行以下方法
  157. $.createElm(this, settings);
  158. $.showQueryParam(this, settings);
  159. $.inputChange(this, settings);
  160. $.fuzzyHandle(this, settings);
  161. }
  162. }
  163. })(jQuery, window, document);
  164. //改变选择项
  165. function FuzzySearchAdd(inputID, channelName, channelID, handlerFun,clearHandlerFun) {
  166. $("#" + inputID + "_show").val(channelName);
  167. //将渠道id赋值给隐藏的input,用这个隐藏的input提交
  168. $("#" + inputID).val(channelID);
  169. //选项容器隐藏
  170. $("#" + inputID + "_selectBox").css({
  171. "display": "none"
  172. });
  173. $("#" + inputID).parent().append('<span class="cross">×</span>');
  174. $("#" + inputID).parent().on("click", ".cross", function () {
  175. $("#" + inputID + "_show").val("");
  176. $("#" + inputID).val("");
  177. if(clearHandlerFun!=""){
  178. eval(clearHandlerFun+"()")
  179. }
  180. $(this).remove();
  181. })
  182. //游戏推荐管理用
  183. if($("#" + inputID + "_show").parent().parent().siblings("input[type=hidden]").length>0){
  184. //不为0,则已传过
  185. if($("#" + inputID + "_show").parent().parent().siblings("input[type=hidden]").eq(0).val()!=0){
  186. $("#" + inputID + "_show").parent().parent().siblings("input[type=hidden]").eq(1).val(2)
  187. }else{
  188. //等于0,则是新增
  189. $("#" + inputID + "_show").parent().parent().siblings("input[type=hidden]").eq(1).val(1)
  190. }
  191. }
  192. if (handlerFun !== "") {
  193. eval(handlerFun + "()");
  194. }
  195. };