Requesting Help with simple jQuery AutoComplete code

JavaScript
1

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>

e.g. if q=cancer, I get back:

{"text":"cancer research","score":12.60096},
{"text":"cancer biology","score":12.593915},

etc.

So I am trying to use jQueryUI to display the returned results (i.e. “text” under the searchBox, as described here>

But I need to change the data source to the Web Service above. To help me code that, I found this>

My attempt to code this is below, but I still need to figure out what the following quote means, & how to do it!
e.g. I am struggling to know what this line does> data: { q: request.term } << Where does ‘request.term’ come from
Any help would be much appreciated.

your code will look similar to the above except you’ll just call response(data) in the success handler. In other words, since you are changing the default AJAX request that takes place, you’ll still have to do it yourself.

<!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>
2

The API documentation for the source option, shows that the request object has a single property called term which contains the value in the text field. In your case, request.term would be a string of "cancer".

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.