Typeahead

typeahead-2inputs.js

                       <!-- Typeahead by Charles Lawrence https://gist.github.com/1848558-->
                        <script type="text/javascript">
                            var autocomplete = $('.typeahead').typeahead().on('keyup', function(ev){
                                    ev.stopPropagation();
                                    ev.preventDefault();
                                    //filter out up/down, tab, enter, and escape keys
                                    if( $.inArray(ev.keyCode,[40,38,9,13,27]) === -1 ){
                                        var self = $(this);                                        
                                        //set typeahead source to empty
                                        self.data('typeahead').source = [];
                                        //active used so we aren't triggering duplicate keyup events
                                        if( !self.data('active') && self.val().length > 0){
                                            self.data('active', true);
                                            //Do data request. Insert your own API logic here.
                                            $.getJSON("file.json",{
                                                q: $(this).val()
                                            }, function(data) {
                                                //alert(data.stopnames);
                                                //set this to true when your callback executes
                                                self.data('active',true);
                                                //Filter out your own parameters. Populate them into an array, since this is what typeahead's source requires
                                                var arr = [], i=data.stopnames.length;
                                                while(i--){
                                                    arr[i] = data.stopnames[i];
                                                }
                                                //set your results into the typehead's source 
                                                self.data('typeahead').source = arr;
                                                //trigger keyup on the typeahead to make it search
                                                self.trigger('keyup');
                                                //All done, set to false to prepare for the next remote query.
                                                self.data('active', false);
                                            });
                                        }
                                    }
                                });
                        </script> 
                        <!--End Typeahead -->                        

                        <!--Output -->
                      <script type="text/javascript">   
							var i = 0;
							var origin;
							var destination;
							var found = 0;
							var result;
							
							//Get the routes with the starting point.
                            $('#startStop').change(function(){
                                //origin = $('ul.typeahead li.active').data('value');
                                $('#routeListing').html('');
                                origin = this.value;
                                result = lookup(origin);
                            });    
							//No typeahead for second box
                            $('#endStop').change(function(){
                                $('#routeListing').html('');
                                destination = this.value;
                                compare(result);
                                $('#routeListing').append('</ul>');
                                i = 0;
                                found = (found) ? 0:1;
                                //$('ul.typeahead li.active').removeClass("active").addClass("inactive");
                            }); 
                            
                            $('#clear').bind('click',function(){
                                $('#routeListing').html('');
                            });
 
                            function lookup(stop){
                            	var arr = [];
                                $.getJSON('file.json',function(data) {
                                        $.each(data.routesandstops, function(i, item) {
                                            var stop_name = item.stop_name;
                                            var route_name = item.route_name;
                                            if (stop_name.localeCompare(stop) == 0){
												arr[i] = route_name;
												i++;
                                            }
                                        });
                                    }
                                );
                                return arr;
                            }  

                            function compare(arr){
                                var found = 0;
								    $('#routeListing').append('<p class="listOfRoutes"> The following routes below can get you from <strong>' 
															    + origin + '</strong> to <strong>' + destination + '</strong>');
									console.log("You are travelling from " + origin + " to " + destination);
                                    $.getJSON('file.json',function(data) {
                                            $('#routeListing').append('<ul class="results">');
                                            $.each(data.routesandstops, function(i, item) {
                                                var stop_name = item.stop_name;
                                                var route_name = item.route_name;
											    var route_id = item.route_id;
											    //If the stop name matches
											    if (stop_name.localeCompare(destination) == 0){
												    //Then check the list of routes from origin
												    for (var key in arr){
													    //Checking for intersecting routes
													    if (route_name.localeCompare(arr[key]) == 0){
														    $('#routeListing').append('<li>' + linkup(route_id) + '</li>'); 
														    found = true;
													    }
												    }
											    }
                                            });
                                        }
                                    ); 
                            }