标签: html-datalist

当数据列表中有一长串元素时,它们都将显示在它们旁边的滚动条上.有没有一种简单的方法可以只显示前5名,而只是关闭其他人？

例如:http://jsfiddle.net/yxafa/

<input type="text" name="search" id="search" placeholder="type 'r'" list="searchresults" autocomplete="off">
<datalist id="searchresults">
    <option>Ray0</option>
    <option>Ray1</option>
    <option>Ray2</option>
    <option>Ray3</option>
    <option>Ray01</option>
    <option>Ray11</option>
    <option>Ray21</option>
    <option>Ray31</option>
    <option>Ray02</option>
    <option>Ray12</option>
    <option>Ray22</option>
    <option>Ray32</option>
    <option>Ray012</option>
    <option>Ray112</option>
    <option>Ray212</option>
    <option>Ray312</option>
    <option>Ray03</option>
    <option>Ray13</option>
    <option>Ray23</option>
    <option>Ray33</option>
    <option>Ray013</option>
    <option>Ray113</option>
    <option>Ray213</option>
    <option>Ray313</option>
    <option>Ray023</option>
    <option>Ray123</option>
    <option>Ray223</option>
    <option>Ray323</option>
    <option>Ray0123</option>
    <option>Ray1123</option>
    <option>Ray2123</option>
    <option>Ray3123</option>
</datalist>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

<div ng-app="" ng-controller="cntryController">
    <input list="testList" type="" ng-model="SelectedDoctor" ng-change="LoadSessionData(SelectedDoctor)" />
    <datalist id="testList">
        <option value="Dr.Test1" ng-selected="selected"></option>
        <option value="Dr.Test2"></option>
        <option value="Dr.Test2"></option>
    </datalist>
</div>

调节器

function cntryController($scope) {
    $scope.LoadSessionData = function(val) {
        console.log(val);
    };
}

检查此链接http://jsbin.com/jifibugeke/1/edit?html,js,console,output

上面提到datalist示例代码和使用angularjs的URL,这里我的问题是我输入的文本框,在控制器添加中添加每个单词,在我的datalist中所选择的细节只显示在控制器中,

所以我有一个问题是让我的HTML5 Datalist从javascripi数组中动态填充,该数组是通过MySQL数据库中的行填充的对象的键的值填充的.唷!

MySQL Database => Table => Rows => JSON => Javascript Objects =>"firstname"&"lastname"key =>名字数组=> Datalist Options.

我成功创建了名称数组:

var nameArray = ["Rick Bross","Madison Smith","Jack Johnson"]; //Example of my array

并设置一个循环来.append他们到datalist:

for (var i = 0; i < nameArray.length; i++) {
    alert(i + " - " + nameArray[i]); //Works Fine, "0 - Rick Bross", "1 - Madison Smith", etc.
    $('#potentials').append("<option value='" + nameArray[i] + ">"); // Not working.
}

这是我的HTML:

<input tabindex='1' list="potentials" type="text" placeholder="First &amp; Last Name" id="name" name="name"></input>
<datalist …

我试图让datalist列表元素始终可见.在聚焦丢失后作为标准,箭头消失.

我希望它总是这样:以下是plunker:https://plnkr.co/edit/ ？ p = preview

<input list="browsers" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

环境:角度指令

任何想法如何实现呢？

最好,

我正在使用以下脚本动态更新html5数据列表,如用户键入的那样:

$('#place').on('keyup', function() {
    $.post('content/php/autocomp.php', { field: 'plaats', val: $('#place').val() }).done(function(response) {
        $('#autocomp-places').html(response);
    });
});

哪个工作正常,但数据主义者通常不会立即显示.当我检查元素时,html就在那里,但是数据列表一更新就不会显示.我怎么强迫它显示？

为了记录:它的工作原理......我只是希望它能够立即显示新的建议.

我正在使用 <datalist>

<datalist id="items"></datalist>

并使用AJAX填充列表

 function callServer (input) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            //return the JSON object
            console.log(xmlhttp.responseText);
            var arr = JSON.parse(xmlhttp.responseText);
            var parentDiv = document.getElementById('items');
            parentDiv.innerHTML = "";
            //fill the options in the document
            for(var x = 0; x < arr.length; x++) {
                var option = document.createElement('option');
                option.value = arr[x][0];
                option.innerHTML = arr[x][1];
                //add each autocomplete option to the 'list'
                option.addEventListener("click", function() {
                  console.log("Test");
                });
                parentDiv.appendChild(option);
            };

        } …

HTML5表单的list属性/ datalist元素显示了一个选项的下拉菜单,可以从中选择,编辑甚至键入某些文本.所有这些都可以通过干净而强大的代码立即实现:

<input list="states">
<datalist id="states">
    <option value="One">
    <option value="Two">
</datalist>

但是,如何使这样的表格发送一个与选项文本不同的值,如通常的选择/选项(下面)？

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

我正在使用HTML并尝试制作列表,如之前的图像所示.但是,通过使用datalist我无法获得滚动条.你能告诉我如何在datalist中启用滚动条.(注意:不能在我的网站上使用脚本语言来实现这一点).

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Afghanistan">
  <option value="Aland Islands">
  <option value="Albania">
  <option value="Algeria">
  <option value="American Samoa">
  //Many more countries
  .
  .
  .
  <option value="Zcountry">
</datalist>

我注意到,当您将文本字段连接到数据列表时,不同的浏览器在建议文本字段的值时会有不同的行为.有些浏览器显示的条目与您键入的内容(IE,较旧的Chrome版本)完全一致,而其他浏览器显示的条目包含您键入的子字符串(firefox,较新的Chrome版本).

例如,键入i文本框,并观察建议:

browser: 
<datalist id="browsers">
    <option value="Google Chrome">Google Chrome</option>
    <option value="Internet Explorer">Internet Explorer</option>
    <option value="Firefox">Firefox</option>
    <option value="Opera">Opera</option>
    <option value="Safari">Safari</option>
    <option value="Others">Others?</option>
</datalist>
 <input type="text" name="browser" list="browsers">

(或者这里是小提琴,如果你喜欢http://jsfiddle.net/yaj8ut3m/)

在IE浏览器,它只会建议Internet Explorer,但Firefox和Chrome浏览器近期将建议Internet Explorer,Firefox和Safari.

有没有办法指定使用哪种自动建议过滤行为？

注意:javascript解决方案是不可接受的

我发现新的<datalist>一般非常有用,但我认为这些建议不够明显.有没有办法触发使用javascript显示datalist建议？

举个例子,我在<input type="number">(jsFiddle)上有一个数据表.

<label>
    Enter a Fibonacci number:
    <input type="number" list="fibonacci" min="0" id="myinput">
</label>
<datalist id="fibonacci">
    <option value="0">
    <option value="1">
    <option value="2">
    <option value="3">
    <option value="5">
    <option value="8">
    <option value="13">
    <option value="21">
</datalist>
<button type="button" id="show-suggestions">Show suggestions</button>

<script>
$('#show-suggestions').click(function() {
    // .showSuggestions() does not exist.
    // I'd like it to display the suggested values for the input field.
    $('#myinput').showSuggestions();
});
</script>

在Chrome中,仅当输入为空,已有焦点且用户随后点击输入时,才会显示完整的建议列表.向下箭头不显示建议 - 它只是递减值.

我想让建议更加明显.作为一个例子,我添加了一个应该打开建议列表的按钮.我在onClick处理程序中放了什么？

我在本例中使用了Chrome,jQuery和数字输入,但我更喜欢独立于所有这些的通用解决方案.