如何进行基因剔除搜索多个关键字以及实时搜索

Question

i am desperately trying to have knockout apply a live search to my project. This search needs the ability to differentiate between spaces in the query and use them as separated search queries. For example; if user types "Matrix" it pulls up both DVD and Bluray Matrix movies... But if user types in Matrix DVD nothing appears.

I am trying to make it search everything in the data separated by space in the query.

Here is my fiddle: https://jsfiddle.net/neosketo/eLgscy1t/10/

HTML:

<div id="container">
<h1>Movie Search</h1>
<form>
  <input id="search" type="search" name="search" placeholder="Search for a user" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off" />
</form>

<table data-bind="visible: movies().length > 0">
  <thead><tr><th>Type</th><th>Name</th><th>Media</th></tr></thead>
  <tbody data-bind="foreach: movies">
    <tr>
      <td data-bind="text: type"></td>
      <td data-bind="text: name"></td>
      <td data-bind="text: media"></td>
    </tr>    
  </tbody>
</table>
</div>

JAVASCRIPT:

var movies = [
  { type: 'action',     name: 'The Matrix',                 media: 'DVD'},
  { type: 'action',     name: 'The Matrix',                 media: 'Bluray'},
  { type: 'fantasy',    name: 'Lord of the Rings',  media: 'DVD'},
  { type: 'fantasy',    name: 'Lord of the Rings',  media: 'Bluray'},
  { type: 'comedy',     name: 'Dumb and Dumber',        media: 'DVD'},
  { type: 'comedy',     name: 'Dumb and Dumber',        media: 'Bluray'}
];

var viewModel = {
  movies: ko.observableArray([]),
  query: ko.observable(''),

  search: function(value) {
    viewModel.movies.removeAll();

    if (value == '') return;

    for (var movie in movies) {
      if (movies[movie].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
        viewModel.movies.push(movies[movie]);
      }
    }
  }
};

viewModel.query.subscribe(viewModel.search);
ko.applyBindings(viewModel);

Answer 1

I'd start out by extending your movie objects to include their own collection of search terms. You don't want to recalculate this every time you type a character:

var moviesWithSearchString = movies.map(function(movie) {
  var ogKeys = Object.keys(movie);
  return Object.assign({}, movie, {
    _searchProps: ogKeys
      .map(function(key) {
        return movie[key].toLowerCase();
      })
  });
});

The _searchProps property holds an array of search words. For your first movie: ["action", "the matrix", "dvd"]

Now, in your search method, we need to transform the search query into an array of lowercase words as well:

var searchVals = value
  .toLowerCase()
  .split(" ");

Then, the fun part begins. We want every ( Array.prototype.every ) search word to appear ( String.prototype.includes ) in at least once ( Array.prototype.some ) of our movie's properties:

viewModel.movies(moviesWithSearchString.filter(function(movie) {
  return searchVals.every(function(searchVal) {
    return movie._searchProps.some(function(searchProp) {
      return searchProp.includes(searchVal);
    });
  });
}));

The working examples:

fiddle: https://jsfiddle.net/dkrct5ko/

stack snippet:

 var movies = [{ type: 'action', name: 'The Matrix', media: 'DVD' }, { type: 'action', name: 'The Matrix', media: 'Bluray' }, { type: 'fantasy', name: 'Lord of the Rings', media: 'DVD' }, { type: 'fantasy', name: 'Lord of the Rings', media: 'Bluray' }, { type: 'comedy', name: 'Dumb and Dumber', media: 'DVD' }, { type: 'comedy', name: 'Dumb and Dumber', media: 'Bluray' }]; var moviesWithSearchString = movies.map(function(movie) { var ogKeys = Object.keys(movie); return Object.assign({}, movie, { _searchProps: ogKeys .map(function(key) { return movie[key].toLowerCase(); }) }); }); var viewModel = { movies: ko.observableArray([]), query: ko.observable(''), search: function(value) { var searchVals = value .toLowerCase() .split(" "); viewModel.movies(moviesWithSearchString.filter(function(movie) { return searchVals.every(function(searchVal) { return movie._searchProps.some(function(searchProp) { return searchProp.includes(searchVal); }); }); })); } }; viewModel.query.subscribe(viewModel.search); ko.applyBindings(viewModel); 

 body { margin: 2em; text-align: center; } form { margin-bottom: 2em; } table { text-align: left; margin: 0 auto; } th, td { padding: .2em; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div id="container"> <h1>Movie Search</h1> <form> <input id="search" type="search" name="search" placeholder="Search for a user" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off" /> </form> <table data-bind="visible: movies().length > 0"> <thead> <tr> <th>Type</th> <th>Name</th> <th>Media</th> </tr> </thead> <tbody data-bind="foreach: movies"> <tr> <td data-bind="text: type"></td> <td data-bind="text: name"></td> <td data-bind="text: media"></td> </tr> </tbody> </table> </div> 

Note that some of the Array and String methods are not supported in old browsers. Check out the linked articles for polyfills.

Answer 2

You could split the query term by space and then use the .some array method to search through the movies.

search: function(value) {
  viewModel.movies.removeAll();

  if (!value) return;

  var values = value.split(' ');

  for (var movie in movies) {
    var found = values.some(function(word) {
        return !!word && movies[movie].name.toLowerCase().indexOf(word.toLowerCase()) >= 0;
    });
    if (found) {
      viewModel.movies.push(movies[movie]);
    }
  }
}

!!word simply short circuits the search in case the user entered multiple spaces resulting in an empty string from the split.

Fiddle: https://jsfiddle.net/eLgscy1t/12/