Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am using javascript and knockoutjs to implement a search filter using the viewmodel .I am not able to get the search filter to work.below is my js file

JavaScript
//Object Constructor Class for Locations
var Locations = function (title, lat, lng, id, marker){

  this.title = title;
  this.lat = lat;
  this.lng  = lng;
  this.id = id;
  this.marker = marker;
};

var viewModel = {
  locations : [
    new Locations('The Travel Cafe',  51.499542,  -0.114134,  
                  '57540ed1498ef7771538048d'),
    new Locations('Scooter Caffè',  51.50050110129609,  -0.11393191896812872,  
                  '4ace5183f964a520d5cf20e3'),
    new Locations('Four Corners',  51.50042544028603,  -0.11365986202011345,  
                  '51e52b0b498e1d7ea31d88c1'),
    new Locations('The Library Lounge at Marriott County Hall',  51.50193765161251,  
                  -0.12006535004714862, '543148b9498ec4159f277ce6'),
    new Locations('Coleman Coffee Roasters',  51.500636,  -0.112947,  
                  '57025a60498e2196f62e9548')
  ],

  searchBox: ko.observable('')

};

viewModel.search = ko.computed(function() {
  var self = this;
  var searchResult = this.searchBox().toLowerCase();

  return ko.utils.arrayFilter(self.locations, function(markerLocation) {
            var title = markerLocation.title.toLowerCase();
            var matched = title.indexOf(searchResult) > -1;
            var marker = markerLocation.marker;
            if (marker) {
                marker.setVisible(matched);
            }
            //when I console.log(markerLocation.marker)---> i get undefined
            return matched;
      });
    }, viewModel);

ko.applyBindings(viewModel);


here is the html file

HTML
<pre><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset= "utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="css/style.css">
	<title>Neighbourhood Project</title>
</head>

<body>
	<div class=".container">
		<div id="map"></div>
	</div>
	<div>
	  <input type="text" placeholder="Search for locations" data-bind:"value: searchBox">
	  <ul data-bind="foreach: search">
	    <li data-bind="text: title "></li>
	  </ul>
	</div>
</body>
  <script type="text/javascript" src="scripts/knockout-3.4.2.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
	<script type="text/javascript" src="js/map.js"></script>
	<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDRb_wXWOfFjBhfbUaH7NYcON4gSIa4wKo&v=3&callback=initMap"></script>
</body>
</html


What I have tried:

i have tried to declare the locations[] array in the viewmodel as an ko.observableArray(). but it didn't work.
can some pls help me with this.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900