Wednesday, February 5, 2014

Search word using third party API (Just like Google Search)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script>
  $(function() {
 $('#tags').on('keyup', function(e) {
search_content($(this).val());
 });
  });
  function search_content(value){
var split_data=value.replace("+", " ");
$.ajax({
type: 'POST',
url: "http://en.wikipedia.org/w/api.php?action=opensearch&search="+split_data+"&namespace=0",
async: false,
cache: false,
crossDomain: true,
dataType: 'jsonp',
success: function( data, status ) {
var availableTags = [];
$.each(data, function(index, element) {
for(var i=0;i<element.length;i++){
availableTags.push(element[i]);
}
});
$('#tags').autocomplete({
source: availableTags
}); }
});
  }
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Search Content: </label>
  <input id="tags">
</div>
</body>

</html>

No comments:

Post a Comment