使用jQuery的autocomplete中遇到的问题(参数不起作用,样式不满足)

最近想将自己的网页做成自动提示功能的,在网站上搜索了一下发现jquery的autocomplete 非常适合自己的需求,于是下载了jquery-ui.js 和 jquery-us.css 两个文件进行实验,结果太省事了,但是发现想要控制列表的高度和条目数根据搜索的结果参数都不管用,后来发现大家用的都是jquery.autocomplete.js,于是各种找,终于找到了一个jquery.autocomplete.js,参数是都能用了,但是样式问题来了,特别是列表的宽度和input的宽度不一致,css文件很简单,也没有设置宽度的地方,于是检查js代码,看是从什么地方设置的,发现源码如下:

     在jquery.autocomplete.js源码的第652行如下

if( options.width > 0 ) //如果设置了宽度就按用户设置的来
			element.css("width", options.width);

763行:

show: function() {
	var offset = $(input).offset();
	element.css({
		width: typeof options.width == "string" || options.width > 0 ?     
                  options.width : $(input).width(), 
		top: offset.top + input.offsetHeight,
			left: offset.left
}).show();

页面跟踪js发现,这里获取的宽度不是我想要的,于是百度获取元素宽度的方法,终于找到了解决方法,也让自己受益匪浅啊

获取元素的宽度方法:

$(selector).width();//返回元素的宽高,不包括padding/border/margin
$(selector).innerWidth();//返回元素的宽高 + padding 
$(selector).outerWidth();//返回元素的宽高 + padding + border 
$(selector).outerWidth(true);//返回元素宽高 + padding + border + margin

将源码中的“$(input).width()” 修改为 “$(input).outWidth()”,样式满足了,大功告成,希望能同样帮到有同样问题的小伙伴。

你可能感兴趣的:(随学随记)