标签: html-datalist

非常简单直接.当我想要选择一个值并将其插入SQLite数据库时,我在表单上预先填充了一个带有值的HTML数据表.这是我的示例代码无效.请帮忙.HTML5 datalist表单创建:

<input  name="TypeList" list="TypeList" placeholder="Select Type"/>
<datalist id="TypeList">
    <option value="State">
    <option value="Area">
    <option value="Town">
    <option value="Street">
    <option value="Number">
    <option value="Local Government">
    <option value="Ward">
    <option value="Country">
</datalist>

这是不起作用的示例jquery代码:

var relationshipTemp = $('#TypeList option:selected').text();

datalist {
  color: red;
  height: 10px;
}

<input list="langs">
<datalist id="langs">
  <option value="Javascript">
  <option value="PHP">
  <option value="C#">
  <option value="C++">
  <option value="C">
  <option value="Python">
  <option value="Java">
  <option value="Ruby">
  <option value="Kotlin">
  <option value="Delphi">
  <option value="Go">
  <option value="Perl">
  <option value="ObjectiveC">
</datalist>

我想使用datalist但 list 被 datas 扩展了太多，我不能把它缩短。因为 CSS 不影响它。你对 datalist 有什么替代建议吗？我不喜欢使用选择，因为我希望用户可以输入并且我想要像搜索文本一样，数据列表适用于此。但是在选择中，您必须只选择没有文本的选项。

在Chrome中,就目前而言,Datalist仅在键入或双击input元素时出现,例如http://jsfiddle.net/r7Y4v/

我试图让数据主义者更早出现.理想情况下,我会在输入旁边放置一个"下拉箭头",单击该按钮会使Datalist出现.

我正在寻找一个webkit解决方案.

我正在使用AngularJS,我想在ng-click选择一个datalist(html5)的元素时使用该指令.

以下是我的实际代码示例:

<label>Search</label>
<input type="text" class="input-search" list="datalistcit" ng-change="changeQuery(queryCity)" ng-model="queryCity" />
<datalist id="datalistcit">
   <option ng-repeat="city in cities" ng-click="goCity(city)" value="{{city.name}}">
   </option>
</datalist>

它不起作用,永远不执行js方法goCity ..任何想法？

我想知道是否有任何非法侵入的方式可能有人知道这将允许HTML数据列表元件的作用，与contenteditable元素，不会与<input>元素。

示例代码：

<label>Choose a browser from this list:
  <span contenteditable list="browsers" name="myBrowser">choose</span> 
</label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

小提琴演示

似乎它只能与<input>元素绑定。在我的情况下，我有一个 javascript 插件，它隐藏了一个输入字段并将其替换为span，对于一些只能使用常规 DOM 元素完成的“特殊”事情，例如span. 这个跨度是contenteditable和行为是它替换的输入的模拟，而输入是隐藏的。

好的，我有以下 HTML 源代码：

<form method="post" action="/" id="search">
  <input list="animals" name="animal">
    <datalist id="animals">
      <option label="Alaskan Malamute" data-id="d8c" value="Dog">
      <option label="Siberian Husky" data-id="w30" value="Dog">
      <option label="Aegean" data-id="rxx" value="Cat">
    </datalist>
</form>

和 JS

function doKeyUp(e) {
  if (e.preventDefault) e.preventDefault();

  if(e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40 ) {return;}

  var input = document.getElementById("animal");
  var search_after = input.value.trim();
  var form = document.getElementsByTagName("form")[0];

  var datalist = document.getElementsByTagName('datalist')[0];

  if (search_after.length >= 2) {

    if (e.keyCode == 13 && search_after.length …

我有一组数据列表选项，我希望在搜索时进行模糊匹配。例如，如果我输入“PHP HTML”或“PHPAndHTML”，我希望它们中的任何一个与“PHP And 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>

我想使用本机数据列表而不是自定义库来执行此操作。原因是在我的实际场景中，我的页面上有数百个输入都使用相同的数据列表，并且使用自定义库会变得非常占用 CPU，而如果我将所有输入绑定到单个数据列表，它实际上非常高效的。

是否可以将图像添加到数据列表选项中？我正在为我的用户建立一个搜索，我希望头像与姓名和简介一起显示在数据列表中，就像 Twitter 或 Facebook 上的那样。该$avatar变量具有图像的链接或 src。

由于 Safari 不支持 datalist，是否还有 datalist 的替代方案？

<form action='results.php'>
   <input list="Search" name="browser" placeholder="Search">
      <datalist id="Search">
    <?php
     $sql = mysql_query("SELECT * FROM profile where iduser!=$iduser ORDER BY username ");
                        while($row = mysql_fetch_array($sql)){                  
     $username = $row['username'];
     $bio = $row['bio'];
     $avatar = $row['avatar'];        
          echo "<option width='50px'value='$username'>/*Image and bio in here?*/</option>";
       }
       ?>
      </datalist>
   <input type=submit value=SEARCH />
</form>

我需要从 aHTML5 DataList到 a添加一些值<select multiple>使用 Javascript但我无法猜测该怎么做。

这是我尝试过的：

<input id="SelectColor" type="text" list="AllColors">
<datalist id="AllColors">
  <option label="Red" value="1">
  <option label="Yellow" value="2">
  <option label="Green" value="3">
  <option label="Blue" value="4">
</datalist>

<button type="button" onclick="AddValue(document.getElementById('AllColors').value, document.getElementById('AllColors').text);">Add</button>
<select id="Colors" size="3" multiple></select>

function AddValue(Value, Text){

//Value and Text are empty!

var option=document.createElement("option");
option.value=Value;
option.text=Text;

document.getElementById('Colors').appendChild(option);

}

我正在使用脆皮表单构建一个“创建菜谱”表单，并且尝试使用数据列表输入字段供用户输入自己的成分，例如“大番茄”或从数据库中已有的全局成分中进行选择，例如“番茄”或“鸡肉” 。但是，无论我输入新成分还是选择现有成分，我都会收到以下错误：“选择有效的选择。该选择不是可用的选择之一。”。我该如何修复这个错误？

视觉的：

模型.py

class Recipe(models.Model):
    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
    websiteURL = models.CharField(max_length=200, blank=True, null=True)
    image = models.ImageField(upload_to='image/', blank=True, null=True)
    name = models.CharField(max_length=220) # grilled chicken pasta
    description = models.TextField(blank=True, null=True)
    notes = models.TextField(blank=True, null=True)
    serves = models.CharField(max_length=30, blank=True, null=True)
    prepTime = models.CharField(max_length=50, blank=True, null=True)
    cookTime = models.CharField(max_length=50, blank=True, null=True)


class Ingredient(models.Model):
    name = models.CharField(max_length=220)

    def __str__(self):
        return self.name

class GlobalIngredient(Ingredient):
    pass # pre-populated ingredients e.g. salt, sugar, flour, tomato

class UserCreatedIngredient(Ingredient): # ingredients user adds, e.g. Big Tomatoes
    user …