Out of my depth with autocomplete problem (Source: URL)

Out of my depth with autocomplete problem (Source: URL)

I am trying to build a simple autoComplete functionality for a website.

This scary looking URL is my Web Service to query > https://primo-instant-apac.hosted.exlibrisgroup.com/solr/ac?&facet=off&fq=scope:()+AND+context:(B)&rows=10&wt=json&q=<Search Characters>

The search string in the URL is 'q' i.e. if q=cancer, I get back this JSON:

{"text":"cancer research","score":12.60096}, {"text":"cancer biology","score":12.593915}, etc. up to 10 results. So 'text' & 'score' hold my returned search results.Now it gets messy... Using this static-overflow post as a guide (https://stackoverflow.com/questions/12370614/jquery-ui-autocomplete-with-json-from-url), I have the code below. And it does nothing. Could someone have a quick look and see why? You will see I have set my request.term to 'q'. I have "mapped" 'text' to 'label', and 'score' to 'id'. And that's all I thought I needed to do, to get a autoComplete search popping up.<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Autocomplete - Default functionality</title> <h1>AutoComplete / AutoSuggest jQuery Demo</h1> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <!-- <link rel="stylesheet" href="/resources/demos/style.css"> --> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $("#tags").autocomplete({ source: function (request, response) { $.ajax({ url: "https://primo-instant-apac.hosted.exlibrisgroup.com/solr/ac?facet=off&fq=scope:()+AND+context:(B)&rows=10&wt=json", data: { q: request.term }, success: function (data) { var transformed = $.map(data, function (el) { return { label: el.text, id: el.score }; }); response(transformed); }, error: function () { response([]); } }); }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div> </body> </html>