Question

这是我的API设置：

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

路由返回正确的JSON响应as per 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"
        }
    ]
}

我在某个时刻将此HTML附加到表单中（它与＃34;最喜欢的动物＆＃34;上面的文档参考中的代码）：

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

语义用户界面应该append route value automatically，但它显然不适用于下拉菜单，而且我收到错误：

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

我尝试了什么

添加 urlData 属性;它会将{value}替换为空字符串，因为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'
            }
        }
    });

我还尝试使用Semantic 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 输入上使用Semantic 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/

Answer 2

关联的GitHub issue已关闭，显然我们找到了从未存在的问题的解决方案：'/search/coolcats?query={value}'不起作用，因为该值始终作为{query}传递{value};改变它，它应该工作。

原始示例应如下所示：

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

Here’s a JSFiddle

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

我尝试了什么

2 个答案: