远程加载下拉选项时，语义UI不会替换GET路由中的{value}

Question

这是我的API设置：

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

该路由根据文档返回正确的JSON响应：

// 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"
        }
    ]
}

我有时会将此HTML附加在表单内（与上述文档参考中的“ Favorite Animal”代码相同）：

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);

并使用API​​设置初始化.dropdown（）：

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

语义UI应该自动附加路由值，但显然不适用于下拉菜单，并且出现错误：

API：缺少必需的URL参数：value / search / coolcats？query = {value}

---

我尝试了什么

添加一个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'
            }
        }
    });

---

我还尝试使用语义UI的方法来获取值，而不是在urlData属性中获取jQuery的.val（），这很幸运。我根本不了解它是如何工作的，实际上，也许我应该在.search输入中对其进行初始化，但是无论哪种方式，它都会返回一个空字符串或一个对象。

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

---

在从文档中复制HTML之前，我尝试初始化一个select标签的下拉列表，该标签产生的HTML与上面的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>';

---

我还尝试了直接在.search输入上使用语义UI的.api（）方法，该方法成功并自动地从路由中替换了{value}并检索了服务器响应，但是即使我指定了，也无法将这些结果附加到下拉列表中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.
    });

---

因此，我无法自动替换路由{value}，也无法使用urlData属性手动设置它。该文档含糊不清，但可以在此处使用，所以我想我做错了；非常感谢您抽出宝贵的时间，对不起，我无法提供可与之一起使用的JSFiddle，但是无论如何您也许会注意到一个错误。

Answer 1

我最近遇到了完全相同的问题，但由于时间限制，没有时间提交错误报告。我设法在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/