我最终使用了一个隐藏的选择列表并在两者之间移动元素。如果有人发现这一点并可以改进这一点,请这样做,我会将您的标记为答案。我或多或少地在 javascript 和 jquery 中摸索,所以我确信可以做很多事情来使它变得更好。
http://jsfiddle.net/x6cfF/1/
编辑:任何找到这个寻找解决方案的人,这里有一个更好的https://codereview.stackexchange.com/questions/23706/better-way-to-filter-select-list/23710?noredirect=1#23710
<input type="search" id="SearchBox" />
<br />
<div class="scrollable" id="CustomerSelectDiv">
<select size=2 class="scrollableinside" id="CustomerSelect">
<option value=100>test</option>
<option value=101>test1</option>
<option value=102>test2</option>
<option value=103>test3</option>
</select>
</div>
<div style="display: none;">
<select id="CustomerSelectHidden"></select>
</div>
<script type="text/javascript">
window.onload=function() {
var $options = $('#CustomerSelect option');
document.getElementById("SearchBox").onkeyup = function () {
var $HiddenOptions = $('#CustomerSelectHidden option');
$HiddenOptions.each(function (index, value) {
document.getElementById('CustomerSelect').appendChild(this);
});
var search = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
var element = $options.filter(function () {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(search);
}).appendTo(document.getElementById('CustomerSelectHidden'));
}
}
</script>