HTML选择填充在搜索中有问题

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开头的项目。一切都很好。

稍后我想根据客户的要求在项目的左侧添加填充。但很快我意识到SELECT中的填充在IE中不起作用（至少在我测试的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。它适用于铬。请分享您的想法。

找到示例here

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;
}
​

My Fiddle

Answer 2

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

使用

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

希望这有助于帮助。 Fiddle here

Answer 3

尝试在CSS中使用align

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

这实际上有效。这是the proof in jsfiddle

Answer 4

提供移动选项所需的左边距

#mylist
{
  padding-left: 10px;
}

检查此fiddle

Answer 5

是的，Vijay的回答是正确的方法。我们应该始终使用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代码可以是这样的。 例如，请参阅运行代码段。

＆＃13;

＆＃13;

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();
			}
		}
	}
}

＆＃13;

<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;█&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>

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 9

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

IE's Default CSS Values

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

Answer 10

jQuery为此提供了解决方案，或者您可以使用onkeypress事件来选择项目。

HTML

<element onkeypress="JavaScriptCodeHere">

JS

object.onkeypress="JavaScriptCodeHere"

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

keychar和numcheck可能有所帮助;）