title: Knockoutjs Array Filter
body: <p>Can someone please help me with this?</p>
  
  <p>How do I get the multi select list to have unique countries? Also, how do I filter the records based on the items selected in the multi select? </p>
  
  <p>Here's the code in JsFiddle <a href="http://jsfiddle.net/B2xcv/" rel="nofollow">http://jsfiddle.net/B2xcv/</a></p>
  
  <p>Please help.</p>
  
  <p>Thanks.</p>
  
  <p><b>HTML</b></p>
  
  <pre><code>   &lt;div class='liveExample'&gt; 
     &lt;p style="color:red"&gt;How do I make this list unique?&lt;/p&gt;
      &lt;p&gt;
      &lt;select data-bind="options: people,optionsText: 'country', selectedOptions: selectedCountries" size="5" multiple="true" style="width:150px"&gt;&lt;/select&gt;
    &lt;/p&gt;
    &lt;p style="color:red"&gt;And how do I filter the records below based on the selected items above? (multiple select)&lt;/p&gt;
     &lt;table style="width:300px"&gt;
       &lt;thead&gt;
         &lt;th&gt;Name&lt;/th&gt;
         &lt;th&gt;Location&lt;/th&gt;
       &lt;/thead&gt;
      &lt;tbody data-bind="foreach: people"&gt;
          &lt;tr&gt;
            &lt;td&gt;
                  &lt;span data-bind="text: name"&gt; &lt;/span&gt; 
            &lt;/td&gt;
              &lt;td&gt;
                  &lt;span data-bind="text: country"&gt; &lt;/span&gt; 
            &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><b>KnockoutJS</b></p>
  
  <pre><code>// Define a "Person" class that tracks its own name and children, and has a method to add a new child
  var Person = function(name, country) {
      this.name = name;
      this.country = country;
  }
  
  // The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)
  var viewModel = {
      people: [
          new Person("Annabelle", "UK"),
          new Person("Bertie", "UK"),
         new Person("Bertie", "USA"),
          new Person("Ali", "Bangladesh"),
          new Person("Patel", "India"),
        new Person("Sweatha", "India"),
         new Person("Minto", "India"),
          ],
    selectedCountries: ko.observableArray()
  };
  
  ko.applyBindings(viewModel);
  </code></pre>