javascript - 在 Knockout JS 中使用自动完成根据输入值更改选择下拉选项

Question

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

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

自动完成输入字段

HTML

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

ViewModel/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
    });

 });

---

选择下拉菜单

HTML

<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>

View 模型

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

Answer 1

在 autocomplete 中选择一个项目时，填充一个名为 selectedId 的可观察对象。然后创建一个computed根据 selectedId

过滤 alphabetList 的属性

您没有提到此自动完成 代码的位置。但是，由于您提到了 ViewModel，我假设您可以在 jquery 代码中访问 viewModel 的实例。

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

这是包含所有这些更改的工作片段:

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对于为自动完成创建自定义绑定(bind)有很好的答案