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

视图模型

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

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

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

这是一个包含所有这些更改的工作 sn-p：

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 找到为自动完成创建自定义绑定的好答案