Jquery autocomplete drop down ajax

Jquery autocomplete drop down ajax
0

#1
<!DOCTYPE html>
<html>
<head>
    <title>json</title>
</head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<body>

  <div class="container-fluid">
    <div class="container text-center" id="initspg">
      <h1>Wikipedia Search Engine</h1>
      <input class="form-control" type="text" placeholder="Search here" id="searchbox" list="json-datalist">
      <datalist id="json-datalist"></datalist>
      <div class="row text-center">
        <button type="button" class="btn btn-outline-secondary" id="searchentr">Search Wiki</button>
        <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" class="btn btn-outline-secondary">I'm feeling lucky</a>
        <!--<button type="button" class="btn btn-outline-secondary" id="random">I'm feeling lucky</button>-->
      </div>
    </div>

  </div>
<script src="code.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</body>
</html>
-----------------------------------------------------------------------------------------------------
#initspg{

  margin-top: 18%;

}

#initspg .form-control{


display: inline-block;
width: 65%;
border-radius: 0px;

}

#initspg h1{

    margin-bottom: 3rem;
    font-size: 3rem;
}

#initspg .row{

justify-content: center;
margin-top: 2%;

}

#initspg .row button{
    color: black;
    margin-right: 2em;
}

#initspg .row a{
    color: black;
}

ul{

  border:1px solid black;


}
-----------------------------------------------------------------------------------------------
$(document).ready(function() {
    /* body... */


var dataList =$('#json-datalist');
var input = $('#ajax');
$('#searchbox').autocomplete({

     source: function(query, result) {
    dataList.html("");


$.ajax({

    url:"https://en.wikipedia.org/w/api.php?list=search&search="+query.term+"&prop=info&inprop=url&action=opensearch&utf8=&format=json",
    method:'get',
    dataType: 'jsonp',
    success: function(response) {
       console.log(response);
       var res=response[1];
       res.forEach( function(element, index) {
         // statements
         var opt=$('<option value='+element+'>');
         dataList.append(opt);
       });

     }

   });
}

});


});

Hey guys I am trying to build a wikipedia search engine. Everything so far was working fine until I try to put autocomplete feature in it. I found autocomplete method of jquery. As far I researched on it, the way it works is as we write something in input field,it takes the suggestion from source and display results in dropdown box (feel free to tell more detail about autocomplete working). Now as I am using ajax for the app so it turns out it doesnt produce drop down automatically, we have to do some styling to produce results in drop down. One method which I have found on the internet to achieve the drop down for ajax is to use the element to create native autocomplete dropdowns for your applications. Here is the link for u guys

http://blog.teamtreehouse.com/creating-autocomplete-dropdowns-datalist-element.

But the problem is that it does’nt show the full suggestion. If you open the dev tools and inspect the datalist element in html and see the value it will seem like this . Its not putting the whole string in the value just ‘Dogs’. I want to display the whole title in drop down not just the initial word. Also in many cases it was not working fine like if I type “scarlett jhonson” it doesnt show any suggestions even though in response array of ajax there are results. I thought this drop down thing comes bultin with automplete feature. Please help me out to get the suggestions in drop down way for ajax.