Bootstrap Tutorial - Set up autocomplete in Javascript








The following code shows how to set up autocomplete in Javascript.

Example

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script type='text/javascript'
  src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){<!--from   w  w w.jav  a  2s .  c  o  m-->
$('input').typeahead({
    source: function(query, process){
        var data = {"ResultSet":{"Query":"face","Result":[{"symbol":"FB"},{"symbol":"FB1"},{"symbol":"Item 1"}, {"symbol":"Item 2"}]}};
        if(data && data.ResultSet && $.isArray(data.ResultSet.Result)){
            process($.map(data.ResultSet.Result, function(item, index){
                return item.symbol;
            }));
        }
    }
})
});//]]>  
</script>
</head>
<body>
  <input type="text" class="span3" style="margin: 0 auto;">
</body>
</html>

Click to view the demo