<!DOCTYPE html>
<html>
  <head>
    <title>Instant Search Example</title>
    <link rel="stylesheet" type="text/css" href="example.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="../src/instantsearch.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $('#qf').instantSearch({
          source: function (req, res) {
            $.ajax({
              url: 'http://developer.echonest.com/api/v4/artist/suggest',
              dataType: 'jsonp',
              data: {
                results: 5,
                api_key: 'N6E4NIOVYMTHNDM8J',
                format: 'jsonp',
                name: req.term
              },
              success: function (data) {
                var artists = jQuery.map(data.response.artists, function (i) { return i.name; });

                res(artists, null);
              },
              error: function (xhr, status, err) {
                res(null, err);
              }
            });
          }
        });
       });
    </script>
  </head>
  <body>
    <form id="form" action="#search">
      <input name="q" id="qf">

      <button>OK</button>
    </form>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Instant Search Example</title>
    <link rel="stylesheet" type="text/css" href="example.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="../src/instantsearch.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $('#qf').instantSearch({
          source: function (req, res) {
            $.ajax({
              url: 'http://developer.echonest.com/api/v4/artist/suggest',
              dataType: 'jsonp',
              data: {
                results: 5,
                api_key: 'FILDTEOIK2HBORODV',
                format: 'jsonp',
                name: req.term
              },
              success: function (data) {
                var artists = jQuery.map(data.response.artists, function (i) { return i.name; });

                res(artists, null);
              },
              error: function (xhr, status, err) {
                res(null, err);
              }
            });
          }
        });
       });
    </script>
  </head>
  <body>
    <form id="form" action="#search">
      <input name="q" id="qf">

      <button>OK</button>
    </form>
  </body>
</html>

Update test api key (eventually, should just use results that do not depend on ajax calls).
Update test api key (eventually, should just use results that do not depend on ajax calls).
