Javascript 使用敲除JS中的自动完成，根据输入值更改选择下拉选项

使用knockoutjs，当用户在输入字段中键入内容并使用jqueryui自动完成选择选择值（例如：Fruit）时，我尝试在一个单独的下拉列表中更改选项的选择下拉列表

示例场景： （1） 用户开始键入“Fru…” （2） 在自动完成输入字段中选择“水果”。 （3） 下拉选项根据值“水果”更改 （4） 下拉选项仅显示“苹果”或其他id相等的选项（例如：ABC）

自动完成输入字段

HTML

<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=" foreach: { data: alphabetList, as: 'item' }, value: selectedItem">
    <option data-bind=" attr: { 'value': item.id }, text: item.name"></option>
</select>

---

选择下拉列表

HTML

<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=" foreach: { data: alphabetList, as: 'item' }, value: selectedItem">
    <option data-bind=" attr: { 'value': item.id }, text: item.name"></option>
</select>

---

在

autocomplete

中选择项目时，填充一个名为

selectedId

的可观察项。然后创建一个属性，该属性根据

selectedId

您没有提到此

自动完成

代码存在的位置。但是，既然您提到了

ViewModel

，我假设您可以在jquery代码中访问ViewModel的实例

此外，不需要使用

foreach

绑定来显示选项。您可以使用绑定

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

var viewModel=function（）{
var self=这个；
self.selectedAlphabet=ko.observable（）；
self.selectedId=ko.observable（）；
self.searchItem=ko.observable（）；
self.alphabetList=ko.array([
{id:“ABC”，name:“Apples”}，
{id:“DEF”，name:“Dog”}，
{id:“GHI”，名字：“Green”}，
{id:“JKL”，name:“Jacket”}
]);
//每当selectedId发生更改时，就会触发此操作
self.availableAlphabetList=ko.pureComputed（（）=>{
返回self.alphabetList（）.filter（item=>item.id==self.selectedId（））；
});
}
//我已经创建了一个实例来在jquery代码中使用它
var instance=newviewmodel（）；
ko.应用绑定（实例）；
$（函数（）{
var searchItem=[
{id:“ABC”，名称：“水果”}，
{id:“DEF”，name:“Animal”}，
{id:“GHI”，name:“Color”}，
{id:“JKL”，名字：“衣服”}；
$（“#搜索项”）.autocomplete({
//为自动完成创建具有“label”属性的数组
来源：searchItem.map（函数（项）{
返回{
标签：item.name，
id:item.id
}
}),
//在选择时，填充selectedId
选择：功能（事件、用户界面）{
//如果此jquery代码在viewModel中，则使用“self.selectedId”
instance.selectedId（ui.item.id）
}
});
});

这看起来不错。不幸的是，我在使用Durandal JS框架运行它时遇到了困难。ViewModel要求我定义“实例”。正在尝试将JQuery添加到viewModel@EricCarr这只是一个例子<代码>实例

在本例中是在

视图模型

的新实例中。正如我在评论中所写，如果自动完成代码在

视图模型中，您必须将其更改为
self
或
this
。