标签: html-datalist

我正在datalist基于ko observable 生成一个选项.

function Company(company) {
    this.id = company.Id;
    this.name = company.Name;
    this.state = company.State.name;
}


var self = this;
self.companies = ko.observable();
$.get('...', {}, function(result) {

    ko.utils.arrayForEach(result, function(company) {
        self.companies.push(new Company(ko.toJS(company)));
    });
});

HTML:

<input type="text" data-bind="value: selectedCompany" list="companiesList" />
<datalist id="companiesList" data-bind="foreach: companies">
    <option data-bind="value: name, text: state"></option>
</datalist>

好的,这是交易:在Company函数中,我存储来自该公司的Id.我想做的事？能够将Id值链接到selectedCompany变量而不是名称的东西？我想显示name属性,但我需要存储Id.

有没有办法做到这一点？谢谢你们!

我正在使用mobile-angular-ui(angular + bootstrap)开发一款应用程序.在我的登录页面中,用户可以记住他们的凭据(用户名和密码).用户的数据ara保存在localStorage中.

这很好.我可以使用datalist在我的登录页面中加载用户:

<form name="userForm">
    <div class="form-group" ng-class="{ 'has-error' : submitted && userForm.username.$invalid && !userForm.username.$pristine }">
        <label for="inputEmail" class="control-label">Username</label>
            <input type="text" class="form-control" id="inputEmail"
                           name="username" ng-model="user.username" list="UserMemoList"
                            required>
    </div>

    <datalist id="UserMemoList">
        <option ng-repeat="item in userMemoList track by $index" ng-click="setChange(item)"
                             value="{{item.username}}" >
        </option>
    </datalist>

我可以选择我想要的item.username,但是我无法选择相应的item.password.我的问题是datalist不像select那样工作,我不能使用ng-options.我必须使用option + value将我的值传递给输入.

<div class="form-group" ng-class="{ 'has-error' : submitted && userForm.password.$invalid && !userForm.password.$pristine }">
    <label for="inputPassword" class="control-label">Password</label>
    <input name="password" type="password" class="form-control" id="inputPassword"
                           ng-model="user.password" required>
</div>

我可以使用ng-change ="theSelectedUserIs(item)",但是我无法传递item对象,因为datalist与用户名输入有关,所以我需要传递item.username.

任何的想法？我不想使用typeahead,因为实际上在bootstrap3中已弃用或添加了其他库/ js/css.我想只使用angular和html.

我的控制器:

$scope.userMemoList = JSON.parse(localStorage.getItem('userList'));
var user = {}; …

我正在使用数据列表,需要检测用户何时从下拉列表中选择内容.一个类似的问题已被问到但我需要它,以便只有当用户从数据列表中选择某些内容时才会触发事件.如果他们在输入中键入内容,那么我不希望事件触发.(请注意我接受的问题的接受答案,即他们绑定输入,这不是我想要的).我尝试过(没有成功):

<datalist>
    <option>Option 1 Here</option> 
    <option>Option 2 Here</option>
</datalist>


$(document).on('change', 'datalist', function(){
   alert('hi');
});

编辑:这个问题与建议的问题不同,因为这是一个完全不同的问题.

我想知道如何验证来自a的输入值Datalist.我的意思是,如果我有一个Datalist用户可以开始写入值然后从中选择它的位置Datalist,但是用户决定不从列表中选择任何值并且他提交具有不完整值的表单,则发送值会错的.

我想过迭代所有的元素,Datalist但我认为如果Datalist有超过1.000的值并且我不知道任何其他方式来验证它,这不是一个好主意.

这是Datalist我要使用的一个例子:

<input type="text" list="colours">

<datalist id="colours">
    <option value="Red" data-id="1">
    <option value="Blue" data-id="2">
    <option value="Green" data-id="3">
    <option value="Black" data-id="4">
    <option value="White" data-id="5">
</datalist>

我有一个像这样的数据主义者

<input list="browsers">

<datalist id="browsers">
  <option id="op1" value="Internet Explorer">
  <option id="op2" value="Firefox">
  <option id="op3" value="Chrome">
  <option id="op4" value="Opera">
  <option id="op5" value="Safari">
</datalist>

我正在使用jquery向datalist添加"option".现在的问题是如何找到用户在datalist中选择/点击的选项.我想在用户选择/点击选项后立即获取选项的ID？

这是从MDN获取的示例.

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

目前,当我在输入元素中键入E时,不会出现任何建议.如果输入值元素在选项值中的任何位置而不是起始值,我想显示建议.

在JSBIN中试一试

可能吗？目前我正在使用jquery Ui Autocomplete来完成此功能.谢谢.

在表单中，我有一个带有数据列表的文本输入。在数据列表中，我添加了不会出现在我的文本输入中的重音术语。例如：如果我输入“a”，带有“ä”或“à”的术语将不会出现在建议中...

最好是整体对口音不敏感

有没有人遇到过这个问题？

谢谢

我正在使用 html datalist 来自动填充一些数据。我想要一种行为，它应该过滤除一个默认值之外的所有内容。下面是示例代码：

<input type="text" list="mylist"/>
<datalist id="mylist">
    <option value="San Jose"></option>
    <option value="San Francisco"></option>
    <option value="New York"></option>
    <option value="Chicago"></option>
    <option value="Boston"></option>
    <option value="Los Angeles"></option>
</datalist>

在上面的事情中，默认情况下，如果我输入 s，它将只显示圣何塞和旧金山，当我输入 n 时，它将只显示纽约。

我的要求是，在任何情况下，无论输入什么，它都应该始终显示圣何塞（默认情况下），然后过滤其余元素。

示例：键入 B，应该同时显示圣何塞和波士顿，因为圣何塞是我的默认值，而波士顿是输入框上的过滤值。

这可能吗 ？如果没有，达到相同结果的替代方法是什么？

JSFiddle

如果需要，我可以使用 Javascript/Jquery。但是，我不能使用任何自动完成插件。

我在使用 Google Chrome（最新版本：83.0.4103.97）的 vue.js 中的 datalist 存在性能问题。我不得不说我几个月前开始学习 Vue.js，所以我还是个菜鸟。使用 Firefox 一切正常，数据列表和过滤立即生效。使用 Chrome 一切都很慢......我在输入字段中输入，字母显示非常缓慢（或一次全部显示），我必须等待很多秒钟才能应用过滤器。在此之后，我必须在元素上多次单击以填充该字段。以下是浏览器行为和部分代码的视频。

火狐：https : //streamable.com/vj4rbb

铬：https : //streamable.com/2sikq5

组件代码：

<b-input-group size="sm" v-if="menuEditState">
  <b-form-input
    :list="`mealDish${meal.id}`"
    :id="`input${meal.id}`"
    placeholder="Selectionner un plat"
    v-model="name"
    :class="{'is-invalid': $v.name.$anyError}"
  />
  <datalist :id="`mealDish${meal.id}`">
    <option v-for="dish in activeDishesByType" :value="`${dish.name} (${dish.humanType})`" :data-value="dish.id"></option>
  </datalist>
  
  <b-input-group-append>
    <b-button variant="primary" @click="onClick" :disabled="loading">
      <i :class="loading ? 'fa fa-spin fa-circle-notch' : 'fa fa-plus'" />
    </b-button>
  </b-input-group-append>
</b-input-group>

和脚本

  computed: {
...mapGetters({
  activeDishesByType: 'activeDishesByType',
}),

getter 基于 getter 中的 Vuex 状态排序（如果我使用没有 getter 排序的状态，我有相同的行为）。

我知道 chrome 开发工具中有一个性能监视器，我试图找到可以帮助我解决这个问题的东西，但我不知道在哪里搜索所有这些信息。 …

我在 Lit-Element Web 组件中有这个数据列表：

<input list="cars" name="car" placeholder = "Type car name">

<datalist id="cars">
  <option value="Jeep">
  <option value="Lamborghini">
  <option value="Ferrari">
  <option value="Fiat 500">
  <option value="Gran Torino">
</datalist>

如果我从列表中选择这些选项之一，然后再次单击输入字段，我将看不到选项列表，而只能看到选定的选项。如果我想查看所有选项，我必须用键盘手动删除输入字段上写的选项。

即使选择了这些选项之一，是否存在显示所有选项的方法？

或者更好的是，是否存在一种清除焦点或单击时输入字段的方法？

没有 JQuery。