JSFiddle - React, Tailwind, and code Playground

by Marie GĂ©rard

HTML

<h1>jQuery Autocomplete</h1>
The <a href="https://api.jqueryui.com/autocomplete/">autocomplete widget</a> supports the following data sources:
<ol>
  <li>Arrays</li>
  <li>Strings</li>
  <li>Functions</li>
</ol>


<h3>1.a) Array Datasource: [ "HTML", "CSS" ]</h3>
<div class="ui-widget">
  <label for="search1">Search: </label>
  <input id="search1">
</div> 
<h3>1.b) Array Datasource: [ { label: "HTML", value: "Hypertext Markup Language" }, { label: "CSS", value: "Cascading Style Sheets" } ]</h3>
<div class="ui-widget">
  <label for="search2">Search: </label>
  <input id="search2">
</div> 
<h3>3. String Datasource: https://codepen.io/rimager/pen/ByKBBG.js</h3>
<div class="ui-widget">
  <label for="search3">Search: </label>
  <input id="search3">
</div> 
<h3>3. Function Datasource: function( request, response ) calling ajax with url: "http://ws.spotify.com/search/1/artist.json"</h3>
<div class="ui-widget">
  <label for="search4">Search: </label>
  <input id="search4">
</div>

JavaScript

$( "#search1" ).autocomplete({
      source: [ "HTML", "CSS" ]
});

$( "#search2" ).autocomplete({
      source: [ { label: "HTML", value: "Hypertext Markup Language" }, { label: "CSS", value: "Cascading Style Sheets" } ]
});


$( "#search3" ).autocomplete({
      source: "https://codepen.io/rimager/pen/ByKBBG.js"
});

 $( "#search4" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://ws.spotify.com/search/1/artist.json",
          dataType: "json",
          data: {
            q: request.term
          },
          success: function( data ) {
            var artists = $.map(data.artists, function(item) {
                    return {
                        label: item.name,
                        value: item.name
                   	 };
            });
            console.log(artists);
            response( artists );
          }
        });
      },
      minLength: 3
    });