tokeninput showing all data instead of filterting

Question

I have a jquery-tokeninput for selecting members in an app. The dropdown when typed in shows all data rather than filtering. Funny thing it it puts in bold what it should be filtering by.

JSON:

[{"name": "Bill Bailey", "id": 2}, {"name": "Will Pimblett", "id": 3}, {"name": "Frank Surname", "id": 4}, {"name": "Mary Smith", "id": 5}, {"name": "Will Pimblett", "id": 6}]

HTML:

<div class="token-input-container">
<form action="." method="GET">
<div class="input-append">
    <input type="text" id="token-input" name="names"/>
    <button type="submit" class="btn token-input-submit">Select</button>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#token-input").tokenInput("/members/api/tokeninput-data", {resultsLimit:2,theme:'facebook',hintText:'Type in part of a members name...'});
    });
    </script>
</div>
</form>
</div>

And apologies for the blue screenshot, it was the only whay I could get it

Answer 1

When you're using an external URL to generate your JSON array, you must do the search logic yourself, and return only the selection of JSON items you relevant to the query typed. (This is to allow you to search databases and what-have!)

By default, your query (data typed in) is found in $_GET['q'] on your server side script.