Omitting query parameter in jQuery Typeahead

Question

I am referring this link: http://www.runningcoder.org/jquerytypeahead/demo/ basic demo (Country v1)

I want the autocompleted part in the typeahead search input to be appended as the URL path instead of query parameter.

Here is the code:

HTML

<form id="form-country_v1" name="form-country_v1">
    <div class="typeahead__container">
        <div class="typeahead__field">
            <span class="typeahead__query">
                <input class="typeahead_search" name="country_v1" type="search" placeholder="Search" autocomplete="off">
            </span>
            <span class="typeahead__button">
                <button type="submit">
                    <i class="typeahead__search-icon"></i>
                </button>
            </span>

        </div>
    </div>
</form>

JS

$.typeahead({
    input: '.typeahead_search',
    order: "desc",
    href: '/api/{{display}}'
    source: {
        data: [
            "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda",
            "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh",
            "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia",
            "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma",
            "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad",
            "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the",
            "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti",
            "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador",
            "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon",
            "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea",
            "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India",
            "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan",
            "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos",
            "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg",
            "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands",
            "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco",
            "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger",
            "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru",
            "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino",
            "Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone",
            "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain",
            "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan",
            "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey",
            "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States",
            "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"
        ]
    },
    callback: {
        onInit: function (node) {
            console.log('Typeahead Initiated on ' + node.selector);
        }
    }
});

I want the api reference as http://localhost:8000/api/India but the api reference that is being processed is with query parameter http://localhost:8000/api/India?q=country_v1=India.

I cannot find the document reference to change this query parameter and append the search parameter in the URL. Can someone please assist?

Answer 1

This is obviously a late answer, after 5 years of no reply to this question.

I keep a simple setup for the javascript part just like this:

$('.js-typeahead').typeahead({
        order: "asc",
        source: {
            product: {
                ajax: {
                    type: "GET",
                    url: "/products/s",
                    path: "products",
                    data: { q: "{{query}}" }
                }
            }
        },
        callback: {
            // simple callbacks from the docs:
            onInit: function() { console.log(this); },
            onSearch: function(node, query) {
                console.log('you called the search');
            }
        }
    });

This will send a GET request with the query parameter name as q and the value is what has been typed into the input box. So something like

/products/s?q=test

The HTML is also simple:

<div class="typeahead__container">
    <div class="typeahead__field">
        <div class="typeahead__query">
            <input class="material-typeahead" name="q" autocomplete="off">
        </div>
    </div>
</div>

I hope this works for anyone having the same issue with changing the query paramter name.