相关疑难解决方法(0)

目前<datalist>大多数主流浏览器(Safari除外)都支持HTML5 元素,这似乎是一种向输入添加建议的有趣方式.

但是,value属性的实现与内部文本之间似乎存在一些差异<option>.例如:

<input list="answers" name="answer">
<datalist id="answers">
  <option value="42">The answer</option>
</datalist>

不同浏览器的处理方式不同:

Chrome和Opera:

FireFox和IE 11:

选择一个后,输入将填充值而不是内部文本.我只希望用户在下拉列表和输入中看到文本("答案"),但是将值传递给42提交,就像一个select遗嘱.

如何让所有浏览器都有下拉列表显示<option>s 的标签(内部文本),但在value提交表单时发送属性？

我想在 html 中制作数据列表，这里是示例

<h1>Datalist Demo</h1>
<label for="default">Pick a programming language</label>
<input type="text" id="default" list="languages">
<datalist id="languages">
    <option value="HTML">
    <option value="CSS">
    <option value="JavaScript">
    <option value="Java">
    <option value="Ruby And Go">
    <option value="PHP And HTML">
    <option value="Go">
    <option value="Erlang">
    <option value="Python And C++">
    <option value="C">
    <option value="C#">
    <option value="C++">
</datalist>

但当我搜索“go”时，它显示了 2 个结果

• Ruby And Go
• Go

当我搜索“go”时的结果

我希望它只显示与输入文本开头匹配的术语，而不是从内部显示。
就像当我搜索“go”时，只应显示一个结果

• Go

我必须对 MySQL 中存储的 5000 多条记录实施此操作。

我遵循此链接上的解决 方案，使数据列表中的输入字段过滤器选项使用包含而不是开头。该解决方案有效，但是我的显示器有问题。这些选项在选项列表上同时显示“值”和“ innerText”，如下所示：

我想做的是使第一行变小而第二行变大，但是我不确定这是否可行以及应该为该元素设置什么样式。

这是我拥有的html代码：

            <div class="inputFieldBorder item item-input">
                <div class="row">
                <input type="text"
                       name="prodList"
                       id= "prodList"
                       maxlength = "50"
                       placeholder = "Things to Buy"
                       ng-model="listData.header.newProduct"
                       list="productlist">
                    <datalist id="productlist">
                        <select >&nbsp;
                            <option ng-repeat="productname in allproducts" value="{{productname.productName}}">{{productname.productName}}</option>
                        </select>
                    </datalist>
                    <button ng-disabled="!listData.header.newProduct"
                      class="button button-icon ion-android-close input-button"
                      ng-click="clearSelection()"></button>
                    </div>
            </div>

我正在为一个数组做一个搜索功能.我有一个输入[文本],例如我把'禁止',然后我需要所有结果以'禁令'开头,例如香蕉,香蕉奶昔,香蕉(油炸)等.

我该怎么做呢？我试过了,但每次尝试都不准确.我试过的是下面的内容.

是)我有的:

var inputBox = document.getElementById('ingredient');
var ingredienten = ["Appel", "Aardbei", "Aardappelen", "Banaan", "Bananen", "Banana"]

inputBox.onkeydown = function(evt) {
      $("#autocomplete").empty();

      // INSERT CODE FOR SEARCH FUNCTION


}

我有一个非常接近,但是当我输入'禁令'时,它提出了'Aardbei'.这显然是错的.在这里,也许我忽略了一些东西？

var inputBox = document.getElementById('ingredient');
var ingredienten = ["banaan", "bananen", "baan", "banana", "baaanana"];

inputBox.onkeydown = function(evt) {
    $("#autocomplete").empty();

    var input, filter, a, i;
    input = document.getElementById("myInput");
    filter = inputBox.value.toUpperCase();
    for (i = 0; i < ingredienten.length; i++) {
        a = ingredienten[i];
        if (a.toUpperCase().indexOf(filter) > -1) {
        //console.log(a);
        $("#autocomplete").append("<li>" + a + "</li>"); …

有没有办法让选择下拉列表的第一个字母自动完成，而不是在 jQuery 上，而是在 PURE JavaScript 上？像[唯一的例子!!!]：

<input type="text" onkeyup="autoComplete();" />
<select id="mySelectDropdwonList">
  <option>John</option>
  <option>Michael</option>
  <option>Toml</option>
</select>

<script type="text/javascript">
function autoComplete() {
  // what is the code ??
}
</script>

它应该像链接http://harvesthq.github.io/chosen/的 jQuery 解决方案一样工作，但在纯 JS 上