javascript - HTML Select 填充有搜索问题

Question

我有一个 HTML 选择，其中包含如下项目。

<SELECT id="mylist" size=5 >
   <OPTION Value="100">100</OPTION>
   <OPTION Value="200">200</OPTION>
   <OPTION Value="210">210</OPTION>
   <OPTION Value="211">211</OPTION>
</SELECT>

现在，如果我在内部单击SELECT并键入 21，那么它将选择210第一个以 21 开头的项目。一切都很好。

后来我想根据客户的要求在项目的左侧添加一个填充。但很快我意识到填充在SELECTIE 中不起作用（至少在我测试的 IE6 和 IE7 上）

所以我加了  

<SELECT id="mylist" size=5 >
   <OPTION Value="100">&nbsp;&nbsp;100</OPTION>
   <OPTION Value="200">&nbsp;&nbsp;200</OPTION>
   <OPTION Value="210">&nbsp;&nbsp;210</OPTION>
   <OPTION Value="211">&nbsp;&nbsp;211</OPTION>
</SELECT>

现在我可以模仿填充。

但我失去了搜索选项。当我在 IE 中输入 21 时，它不会选择 210。它在 chrome 中运行良好。请分享你的想法。

在这里找到样品

Answer 1

如何将其包装在 div 中：

HTML：

<div class="listwrapper">
    <SELECT id="mylist" size=5 >
        <OPTION Value="100">100</OPTION>
        <OPTION Value="200">200</OPTION>
        <OPTION Value="210">210</OPTION>
        <OPTION Value="211">211</OPTION>
    </SELECT>
</div>​

CSS：

.listwrapper
{
    padding: 0px 0px 0px 15px;
    border: solid 1px silver;
    width: 50px;
}
.listwrapper select,
.listwrapper select:active
{
    border: none 0px white;
    width: 50px;
}
​

我的小提琴

Answer 2

<style>是一个内联元素，因此添加填充在 IE6 中不起作用，但是display:block;可以克服这个问题

采用

<style>
    #mylist
{
    padding-left:10px;
    display:block;
}
</style>​ 

希望这会有所帮助。在这里提琴

Answer 3

尝试在 CSS 中使用对齐

​select { width:auto; }
option { text-align:center; }

这确实有效。这是jsfiddle中的证明

Answer 4

提供移动选项所需的左填充

#mylist
{
  padding-left: 10px;
}

检查这个小提琴

Answer 5

是的，维杰的答案是正确的方法。我们应该始终使用CSS而不是任何其他。

这是示例：-

<select  size="10" style="text-align:center">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Four</option>
</select>

放置尺寸不是强制性的。

希望它是完整的帮助。

Answer 6

覆盖浏览器搜索的 javascript 代码可以是这样的。例如，请参阅运行代码片段。

if (!dimon) {
	var dimon = {};
}
if (!dimon.select) {
	dimon.select = {
		/**
		 * Contains last typed character, and last selected option value
		 * (integer). For example, { "AlternativeMobileSelectionMenu" : { "char" :
		 * "s", "index" : 115 }, "AlternativeTariffSelectionMenu" : { "char" :
		 * "a", "index" : 0 } }
		 */
		hist : {},
		search : function(select, e) {
			// JQuery select object
			var select = $(select);
			if (!select) {
				return;
			}
			// id of HTML select, which is located under 0 index
			var sid = select[0].id;

			// dynamic HTML event
			e = e || window.event;
			var keycode = e.which || e.keyCode;
			keycode = String.fromCharCode(keycode);
			// Search should be case-insensitive
			keycode = keycode.toLowerCase();

			if (keycode < 'a' && keycode > 'z') {
				// handle only alphabetic character is typed
				return;
			}

			// Prevent default browser behavior
			if (e.preventDefault) {
				e.preventDefault();
			} else {
				e.returnValue = false;
			}

			if (!this.hist[sid]) {
				this.hist[sid] = {};
			}
			var lastChar = this.hist[sid]['char'];
			if (keycode != lastChar) {
				// if a new character is typed, reset
				// last typed character
				this.hist[sid]['char'] = '';
				// and last selected option
				this.hist[sid]['index'] = -1;
			}

			// options which matches the input character
			var filteredOptions = new Array();
			// all select options
			var options = select.find("option");

			for (var i = 0; i < options.length; i++) {

				var opt = $(options[i]);
				// Example option text
				// "  30|25   █ Magenta Mobil L mit Top-Handy"
				// "                  Sony Xperia Z2 schwarz (1,00 EUR)"
				var text = opt.text().toLowerCase();

				// Regular expression finds the first alphabetic character
				var regexp = new RegExp("[^a-z]*([a-z]{1}).*", "i");
				var result = regexp.exec(text);
				// the output will be:
				// 'm'
				// 's'
				text = result != null ? result[1] : '';

				if (opt.val() != '' && text.indexOf(keycode) == 0) {
					// add option value, if it matches
					filteredOptions.push(opt.val());
				}
			}

			var size = filteredOptions.length;
			if (size == 0) {
				return;
			}

			// Example, if we have 2 mobile devices in the list
			// Samsung Galaxy S5
			// Sony Xperia Z2
			// and type 'S', then Samsung will be selected,
			// if we type 'S' for the second time, then Sony will be selected,
			// and if we type 'S' once again, then Samsung will be selected
			// again.
			// value of the first suitable option
			var firstOpt = parseInt(filteredOptions[0]);
			// value of the last suitable option
			var lastOpt = parseInt(filteredOptions[size - 1]);
			// Last selected option value
			var lastSelected = this.hist[sid]['index'];

			if (lastSelected == -1) {
				// Character is typed for the first time
				this.hist[sid]['char'] = keycode;
				this.hist[sid]['index'] = firstOpt;
				select.val(this.hist[sid]['index']);
				select.change();

			} else if (lastSelected >= 0 && lastSelected < lastOpt) {
				// The same character is typed, just increment the option value
				this.hist[sid]['index'] = lastSelected + 1;
				select.val(this.hist[sid]['index']);
				select.change();

			} else if (lastSelected >= 0 && lastSelected == lastOpt) {
				// The same character is typed, but the last suitable option was
				// already selected before.
				// So select the first option again
				this.hist[sid]['index'] = firstOpt;
				select.val(this.hist[sid]['index']);
				select.change();
			}
		}
	}
}

<html>
<head>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
	<select id="devices" size="1"
		onkeypress="dimon.select.search(this, event)">
		<option value="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Apple iPhone
			5s 64GB Gold (199,95 EUR)</option>
		<option value="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Samsung
			Galaxy S5 LTE+ weiß (1,00 EUR)</option>
		<option value="2">&nbsp;30|25&nbsp;█&amp;nbsp;Sony Xperia Z2
			Tablet LTE+ (19,95 EUR)</option>
		<option value="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Xperia
			Z2 schwarz (1,00 EUR)</option>
		<option value="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Xperia
			Z2 weiß (1,00 EUR)</option>
	</select>
</body>
</html>

Answer 7

我做了这个，我假设你想要这样的东西：MyFiddle

<style>
    option {
    width: 40px;
    text-align: center;
    }
</style>

<SELECT id="mylist" size=5 >
   <OPTION Value="100">100</OPTION>
   <OPTION Value="200">200</OPTION>
   <OPTION Value="210">210</OPTION>
   <OPTION Value="211">211</OPTION>
</SELECT>

Answer 8

使用   在 IE 中获取正确的填充，并使用键事件根据按下的键选择项目。

Answer 9

这可能是您的 IE6/7 问题的一部分：

IE 的默认 CSS 值

放置默认 CSS 值的愚蠢地方。IE8 和更高版本似乎没有这个问题。

Answer 10

jQuery 对此有解决方案，或者您可以使用onkeypressEvent 来选择项目。

HTML

<element onkeypress="JavaScriptCodeHere">

JS

object.onkeypress="JavaScriptCodeHere"

从这里，替换JavaScriptCodeHere为您的 JS 脚本以根据按键提取数字。我不会为你做这件事，因为这不是这个网站的目的，但我可以为你指明正确的方向。

keychar并且numcheck可能会有所帮助；）