如何用淘汰赛创建实时搜索？

Question

我有一个项目，我们需要创建一个带淘汰赛的实时搜索，带有一些标题的地图，当标题进入搜索字段时，其他标题应该消失，我尝试使用不同的代码，但不使用它们，并且没有错误，以帮助我弄清楚。

我的html代码：       过滤：

    <ul data-bind="foreach: locations">
      <li data-bind="text: title"></li>
    </ul>
</div>

对于js：

function ViewModel(){
  var self =this;
  this.filter = ko.observable();

  this.locations = ko.observableArray([{ title:'Safa Bridge'},{ title:'Holy Mosque'},{ title:'Diamond Tower'},{ title:'Albaik Resturant'},{ title:'Zamzam'}]);

  this.visibleLocations = ko.computed(function(){
       return this.locations().filter(function(location){
           if(!self.filter() || location.title.toLowerCase().indexOf(self.filter().toLowerCase()) !== -1)
             return location;
       });
   },this);

}

ko.applyBindings(new ViewModel());