文章/答案/技术大牛

发布

社区首页 >问答首页 >在Knockout JS中根据输入值更改选择下拉选项

问在Knockout JS中根据输入值更改选择下拉选项
EN

Stack Overflow用户

提问于 2017-11-21 21:10:07

回答 1查看 2.1K关注 0票数 1

使用Knockout JS，当用户输入一个输入字段并使用jquery-ui自动完成选择选择一个值(例如:水果)时，我试图在单独的下拉列表中更改选项的选择下拉列表。

示例场景：(1)用户开始键入“Fru.”(2)在“自动完成输入”字段中选择“果树”。(3)下拉选项根据值改变：“水果”(4)下拉选项只显示“苹果”或其他等于id的选项(例如: ABC)。

自动完全输入场

<input type="text"
    id="searchItem"
    placeholder="Search"
    tabindex="0"
    data-bind="textInput: searchItem, valueUpdate: 'onkeyup'"/>

视图模型/JQuery(自动完成)

// Search Item
$(function() {
    var searchItem = [
        { id: "ABC", name: "Fruit" },
        { id: "DEF", name: "Animal" },
        { id: "GHI", name: "Color" },
        { id: "JKL", name: "Clothing" }
    ];

    $("#searchItem").autocomplete({
      source: searchItem
    });

 });

选择下拉

<select class="form-control"
        id="alphabetList"
        data-toggle="tooltip"
        tabindex="0"
        data-bind=" foreach: { data: alphabetList, as: 'item' }, value: selectedItem">
    <option data-bind=" attr: { 'value': item.id }, text: item.name"></option>
</select>

ViewModel

// Alphabet List
this.alphabetList = ko.observableArray([
    { id: "ABC", name: "Apples" },
    { id: "DEF", name: "Dog" },
    { id: "GHI", name: "Green" },
    { id: "JKL", name: "Jacket" }
]);

autocomplete

javascript

jquery

knockout.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-22 18:35:52

在选择autocomplete中的项时，填充一个可观察的名为selectedId的项。然后创建一个computed属性，该属性基于selectedId过滤alphabetList

您还没有提到这个autocomplete代码在哪里存在。但是，既然您提到了ViewModel，我假设您可以在jquery代码中访问viewModel的实例。

另外，您不需要使用foreach绑定来显示选项。您可以使用options绑定。

下面是一个包含所有这些更改的工作片段：

var viewModel = function() {
  var self = this;
  self.selectedAlphabet = ko.observable();
  self.selectedId = ko.observable();
  self.searchItem = ko.observable();
  
  self.alphabetList = ko.observableArray([
      { id: "ABC", name: "Apples" },
      { id: "DEF", name: "Dog" },
      { id: "GHI", name: "Green" },
      { id: "JKL", name: "Jacket" }
   ]);

  // this gets triggerred everytime selectedId changes 
  self.availableAlphabetList = ko.pureComputed(() => {
    return self.alphabetList().filter(item => item.id == self.selectedId());
  });
}

// I have created an instance to use it in jquery code
var instance = new viewModel();

ko.applyBindings(instance);

$(function() {
   var searchItem = [
   { id: "ABC", name: "Fruit" },
   { id: "DEF", name: "Animal" },
   { id: "GHI", name: "Color" },
   { id: "JKL", name: "Clothing" }];

  $("#searchItem").autocomplete({
    // creating an array with a "label" property for autocomplete
    source: searchItem.map(function(item) {
      return {
        label: item.name,
        id: item.id
      }
    }),
    // on select populate the selectedId
    select: function(event, ui) {
      // if this jquery code is within viewModel, then use "self.selectedId"
      instance.selectedId(ui.item.id)
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">

<input type="text" id="searchItem" placeholder="Search" tabindex="0" data-bind="textInput: searchItem, valueUpdate: 'onkeyup'" />

<select class="form-control" id="alphabetList" data-toggle="tooltip" tabindex="0" data-bind="options: availableAlphabetList, 
                      optionsText: 'name',
                      optionsValue: 'id',
                      value: selectedAlphabet
                      optionsCaption: 'Choose..'">
</select>

您还可以浏览this question，它为自动完成创建自定义绑定提供了很好的答案。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47422784

复制

相似问题

问在Knockout JS中根据输入值更改选择下拉选项
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Knockout JS中根据输入值更改选择下拉选项EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Knockout JS中根据输入值更改选择下拉选项
EN