The semantic user interface does not replace the {value} on the GET route when deleting drop-down list parameters remotely

Question

Here is my API setup:

//-------------------------------------------------------------------------
// Define API endpoints once globally.
//-------------------------------------------------------------------------
$.fn.api.settings.api = {
  'find cool cats' : '/search/coolcats?query={value}'
};

The route returns the correct JSON response according to the documentation :

// For example, "http://localhost:3000/search/coolcats?query=cool" returns this limited array of results:

{
    "success": true,
    "results": [
        {
            "name": "Cool Cat Cooper",
            "value": "Cool Cat Cooper"
        },
        {
            "name": "Cool Cat Charlie",
            "value": "Cool Cat Charlie"
        },
        {
            "name": "Cool Cat Mittens",
            "value": "Cool Cat Mittens"
        }
    ]
}

I am adding this HTML inside the form at some point (this is the same "Favorite Animal" code from the above documentation):

var coolCatsField = '<div class="field">';
        coolCatsField += '<label>Find a cool cat:</label>';
        coolCatsField += '<div class="ui fluid search selection dropdown cool_cat_search">';
            coolCatsField += '<input type="hidden">';
            coolCatsField += '<i class="dropdown icon"></i>';
            coolCatsField += '<input type="text" class="search" tabindex="0">';
            coolCatsField += '<div class="default text">';
                coolCatsField += 'Start typing to search or add';
            coolCatsField += '</div>';
            coolCatsField += '<div class="menu" tabindex="-1"></div>';
        coolCatsField += '</div>';
    coolCatsField += '</div>';

$('#someFormField') // Is a <div class="field">...</div> as well.
    .after(coolCatsField);

And initialize .dropdown () with the API settings on it:

$('.cool_cat_search').dropdown({
    apiSettings : {
        action   : 'find cool cats',
        throttle : 500
    }
});

The semantic interface should automatically add the route value , but it doesn't seem to work for the drop-down lists, and I get an error:

API: Missing required URL parameter: value / search / coolcats? query = {value}

---

What i tried

urlData; {} , jQuery.val() -, .search ( , ). .val() , .

$('.cool_cat_search')
    .dropdown() // I think it should be initialized first for .val() to work.
    .dropdown({
        apiSettings : {
            action   : 'find cool cats',
            throttle : 500,
            urlData  : {
                value : $('.cool_cat_search .search').val()
            }
        }
    });

---

, , , , :

$('.cool_cat_search')
    .dropdown({
        apiSettings : {
            action   : 'find cool cats',
            throttle : 500,
            urlData  : {
                value : 'cool'
            }
        }
    });

---

jQuery.val() urlData, . , , , , .search, .

$('.cool_cat_search')
    .dropdown('get value');

---

HTML- , select, HTML-, , . , , .

var coolCatsField = '<div class="field">';
        coolCatsField += '<label for="cool_cat_search">Find a cool cat:</label>';
        coolCatsField += '<select id="cool_cat_search" class="ui fluid search selection dropdown" name="query"><option value="">Start typing to search or add</option></select>';
    coolCatsField += '</div>';

---

Semantic UI.api() .search, {} , , stateContext:

$('.cool_cat_search .search')
    .api({
        action       : 'find cool cats',
        stateContext : '.cool_cat_search' // UI state will be applied to the dropdown element, defaults to triggering element.
    });

---

, {}, urlData. , , , - ; , , JSFiddle , , , .

Answer 1

GitHub , , -, , : '/search/coolcats?query={value}' , {query} {value}; , .

:

//-------------------------------------------------------------------------
// Define API endpoints once globally.
//-------------------------------------------------------------------------
$.fn.api.settings.api = {
  'find cool cats' : '/search/coolcats?query={query}'
};

Heres JSFiddle.

Answer 2

, - . jsfiddle, - :

$('.ui.dropdown')
  .dropdown({
    apiSettings: {
        action   : 'find cool cats',
        throttle: 500,
        beforeSend: function(settings) {
            settings.urlData = {
                value: $('.ui.dropdown .search').val()
            };

            return settings;
        }
    }
  });

http://jsfiddle.net/Lwwonzte/