HTML中chosen.js的小应用（含高度调试）

前言：最近world cup，一直在看比赛，每天3场比赛，我恨不得都看，可是还要上班，就只能看两场，从8点一直看到后半夜。所以本来想好好整理一下，写一点儿数据结构和算法的浅显分析与总结也一直没有写。前两天废了很多的精力在做一个下拉框，下了一个chosen.js的控件，还挺好用的，记录一下子用法。

这个 chosen.js 是放在 GitHub 上的，有大手子可以上去给它好好改一改，因为有的功能还需完善。

下载地址

下载压缩包下来解压大概是这样

拉一篇使用教程

在页面中需要同时引入，jquery.js chosen.jquery.min.js chosen.css 才可以使用

把js和css都放入相应的目录时，注意，把 chosen-sprite.png chosen-sprite@2x.png 放到css旁边，这就是下拉的那个小箭头。

HTML上是这样

<select id="compName" name="compName" data-placeholder="请选择单位..." class="chosen-select">
    <option value=""></option>
    <c:forEach items="${compName}" var="list">
        <option <c:if test="${list.pkId == compId}">selected="selected"</c:if> value="${list.pkId}">${list.cusName}</option>
    </c:forEach>
</select>

其中空的<option></option>是为了显示上面 data-placeholder 的“请选择单位用的”

js需要初始加载

$(".chosen-select").chosen({
    no_results_text: "没有找到结果！",//搜索无结果时显示的提示
    search_contains:true,   //关键字模糊搜索，设置为false，则只从开头开始匹配
    allow_single_deselect:true, //是否允许取消选择
    width:'250px',
    max_selected_options:6  //当select为多选时，最多选择个数
});

width是下拉的宽度，不然太窄。

看下效果

这是应用控件之后的。

对比应用之前的。

确实好看很多，而且还能输入自动匹配。

但是里面有个问题没解决。

之前的input或者下拉，都很高，这个控件弄出来后都比较小。

在阅读了chosen属性之后发现并没有设置下拉框高度的方法，使用下拉中的font-size也不能将它撑大，因为它里面有了别的变化。

审查元素看一下

select标签中的div a div都是控件生成的，挨个试验哪个能改这个下拉框的外观上的高度，经过试验发现，修改a标签的样式能修改高度。

element.style  {

1. height: 50px;

}

本来是空的，加上50px的高度后，下拉变化。

所以，根据a标签的属性 chosen-single chosen-single-with-deselect 去chosen.js里找一找，发现这一句

AbstractChosen.prototype.get_single_html = function() {
  return "<a class=\"chosen-single chosen-default\">\n  <span>" + this.default_text + "</span>\n  <div><b></b></div>\n</a>\n<div class=\"chosen-drop\">\n  <div class=\"chosen-search\">\n    <input class=\"chosen-search-input\" type=\"text\" autocomplete=\"off\" />\n  </div>\n  <ul class=\"chosen-results\"></ul>\n</div>";
};

给a加个style，变成

AbstractChosen.prototype.get_single_html = function() {
  return "<a style='height: 50px' class=\"chosen-single chosen-default\">\n  <span>" + this.default_text + "</span>\n  <div><b></b></div>\n</a>\n<div class=\"chosen-drop\">\n  <div class=\"chosen-search\">\n    <input class=\"chosen-search-input\" type=\"text\" autocomplete=\"off\" />\n  </div>\n  <ul class=\"chosen-results\"></ul>\n</div>";
};

重跑一下发现，好了。具体其他样式再设置。