输入自动提示插件 jquery-coolautosuggest

快来打我* 2022-04-08 11:40 322阅读 0赞

github： [https://github.com/w3shaman/jquery-coolautosuggest][https_github.com_w3shaman_jquery-coolautosuggest]  
效果如下：  
![在这里插入图片描述][20181213164404314.jpg]

使用方法：

$("#deptName").bind("keyup",function(){ 
        $("#deptId']").val("");
    }).coolautosuggest({ 
        url:"url?chars=",
        showThumbnail:true,
        showDescription:true,
        //width:300,
        onSelected:function(result){ 
        	/*如果选择option选项后，需要将deptId 赋给某个控件; 则可以绑定keyup事件清空deptId值，防止修改deptName但没选择option选项时， 导致deptName 和 deptId值不一致;（这种情况，deptId值可在后台根据deptName再次查询）。*/
            if($.trim($(this).val()) != ""){  //防止ctrl+X 剪切deptName 控件的值时，result 仍旧是旧值，而不是null
    	        if(result!=null){ 
    	            $("#deptId']").val(result.id);
    	        }else{ 
    	            $("#deptId']").val("");
    	        }
            }
        }
    });

该插件具体使用可以参考：[https://www.cnblogs.com/zhouxuchen/p/4893347.html][https_www.cnblogs.com_zhouxuchen_p_4893347.html]

以下说一说本人使用时的一些情况：  
（一）本人在使用该插件版本号为：version 2.4.0，时，以下代码报错：

settings.additionalFields[key].val()

粗略看了下，是附加参数的，感觉没必要就注释了，即注释如下代码：

/*if (typeof settings.additionalFields == "object") { for (var key in settings.additionalFields){ additionalFields = additionalFields + key + encodeURI(settings.additionalFields[key].val()); } }*/

（二）原 jquery.coolautosuggest.css 样式展示很low，于是作出如下修改：  
（1）修改jquery.coolautosuggest,js 文件

本可修改第29行，当没有给 width设置值时，默认为以下注释的宽度，但某些情况，可能获取到的值为 100% 等非具体的数据，故不这么改。

if (settings.width == null) { 
          //textField.width() 有时会获取到 100，但实际宽度并不是100px
          settings.width = textField.width() + 3;
          //settings.width = parseFloat(window.getComputedStyle(textField[0]).width);//有时获取到 100% 等非具体数据
    }

修改：将上面的代码剪切到第259行，如下

this.show=function(height){ 
          positionHolder();
          // Default width is textfield width + 3px
          if (settings.width == null) { 
              settings.width = parseFloat(window.getComputedStyle(holder.prevObject[0]).width);//有时获取到 100% 等非具体数据
          }
    
          holder.css({ 
              "height":height + "px",
              "width":settings.width + "px" 
          });
    
          holder.find("." + suggestItem).css({ 
        	  "width":settings.width + "px",
              "overflow":"hidden"
          });
    
          holder.show();
    }

（2）修改jquery.coolautosuggest,js 文件（第386行）

function positionHolder() { 
    	holder.css({ 
    		"position": "absolute",
    		"left": textField.position().left + "px",
    		"top": textField.position().top + textField.height() + 15 + "px"
    	});
    }

（3）在bootstrap modal 弹出框下，使用该插件，如果数据过多，想通过滚动条来滑动却会导致提示框隐藏，断点查明原因是：在 modal 框中点击滚动条时，会触发输入框的 blur 事件，而在非 modal 的正常情况下，拖动滚动条是不会触发输入框的 blur 事件的。可使用如下方法解决：  
修改jquery.coolautosuggest,js 文件（大约第226行）

textField.bind("blur", function(e){ 
    	//添加如下判断
        if(e.relatedTarget && $(e.relatedTarget).hasClass("modal")){  //如果是模态框
        	$(document).unbind("click").bind("click", function(e){ 
        		$(".modal-dialog #suggestions_holder").css("display","none")
        	});
        	return;//模态框不继续执行代码
       }
        ...

（4）修改jquery.coolautosuggest.css 文件，如下：

/* Style For Suggestions */
        
    /* For creating side border like this | item 1 | | item 2 | */
     
    .suggestions{ z-index: 999999;top:30px;height:auto!important;max-height:300px!important;overflow-y:auto;overflow-x:hidden;}
    .suggestions .suggest_item{ 
    	padding: 0 10px;
    	background-color:#EEEEEE;
    	border-left:1px solid #1493CE;
    	border-right:1px solid #1493CE;
    	font-size: 14px;
    	font-weight: bold;
    	line-height: 32px;
    	vertical-align: middle;
    	color: #777;
    }
    .suggestions .suggest_item b { color:#f00;}
    
    /* For creating top border like this ------------ item 1 ... */
    .suggestions .suggest_item.first{ 
    	border-top:1px solid #1493CE;
    }
    
    /* For creating bottom border like this ... item 2 ------------ */
    .suggestions .suggest_item.last{ 
    	border-bottom:1px solid #1493CE;
    }
    
    /* For coloring the selected item */
    .suggestions .suggest_item.selected, .suggestions .suggest_item.selected .description{ 
    	background-color:#1493CE;
    	color:#fff;
    	cursor:pointer;
    }
    
    /* Image thumbnail */
    .suggestions .suggest_item .thumbnail{ 
    	background-color:transparent; /* background-color: #000; opacity:1;filter:alpha(opacity=1); */
    	background-position: top center;
    	background-repeat: no-repeat;
    	margin: 1px 2px 1px 2px;
    	float: left;
    	width: 50px;
    	height: 50px;
    }
    
    /* Description */
    .suggestions .suggest_item .description{ 
    	font-style: italic;
    	font-size: 11px;
    	color: #777;
    }

附加一段Java 后台代码：

public String suggest(HttpServletRequest request) throws UnsupportedEncodingException{ 
    		
    	//获取前台输入参数（对获取到的key 进行 sql 模糊查询）
    	String key = request.getParameter("chars") != null ? request.getParameter("chars").toString() : "";
    	
    	//如果乱码可以试一下这段代码
    	/*if (key.equals(new String(key.getBytes("ISO-8859-1"), "ISO-8859-1"))) { key = new String(key.getBytes("ISO-8859-1"), "UTF-8"); }*/
    	
    	//以下为构建的数据
    	List<JSONObject> list = new ArrayList<JSONObject>();
    	for(int i=0; i< 6; i++){ 
    		JSONObject json = new JSONObject();
    		json.put("data", "中国"+i);
    		json.put("id", i);
    		list.add(json);
    	}
    	return list.toString();
    }

[https_github.com_w3shaman_jquery-coolautosuggest]: https://github.com/w3shaman/jquery-coolautosuggest
[20181213164404314.jpg]: /images/20220405/e264998a599b43d78910d6e1351b775a.png
[https_www.cnblogs.com_zhouxuchen_p_4893347.html]: https://www.cnblogs.com/zhouxuchen/p/4893347.html