Using typeahead with Bootstrap 3

Question

I am trying to use typeahead.js to create a 'live search' - basically I want to search a json file and return back the results to the screen.

I have generated a json file with all of the devices I am trying to search, the structure is as follows:

{"short_name":"3555","long_name":"Nokia 3555"}

So whatever the user enters then it is searched for in the long_name, the only reason I have the 'short_name' is because I require it to generate the URL that the user will be redirected to eg. site.com/device/3555

I've uploaded the full json file here - https://docs.google.com/file/d/0B6O0C30w5kQgR08xZ0xMWnV5TW8/edit?usp=sharing

<script type="text/javascript">
$('.typeahead').typeahead({                                
  name: 'devices',                                                          
  prefect: '/data/devices.json',
  limit: 10                                                                   
});
</script>

The following code doesn't seem to do anything - can anyone indicate where I am going wrong?

Answer 1

You have a spelling mistake prefect should be prefetch, try it but you will want to check the path is correct in your own code too:

<script type="text/javascript">
$('.typeahead').typeahead({                                
  name: 'devices',                                                          
  prefetch: '/data/devices.json',
  limit: 10                                                                   
});
</script>