Question

我正在尝试根据用户选择的下拉框在搜索框周围添加一些逻辑。

搜索框：

<div class="ui search">
    <div class="ui left loading icon input">
        <input class="prompt" type="text" placeholder="Search Youtube" value="">
        <i class="icon"></i>
    </div>
</div>

下拉列表：

<div class="ui selection dropdown">
    <input name="type" type="hidden" value="">
    <i class="dropdown icon"></i>
    <div class="default text">Search Type</div>
    <div class="menu">
        <div class="item" data-value="1">Channel ID</div>
        <div class="item" data-value="0">User Name</div>
    </div>
</div>

例如，如果用户在下拉框中选择B，则我的查询命令将查询B={some value}和A=Blank。如果用户在下拉框中选择了A，则B=Blank和A={some value}。

这是我试过的，但我不确定如何用逻辑包裹$('.ui.search')函数。或者是否可以有多个查询，例如q={id}?results={count}并在外部保留此字符串，但是当用户键入搜索时，我想修改保留URL变量的var，并且将其插入apiSetting的url字段。

$('.ui.search')
    .search
    (
        {
            apiSettings: {
                onResponse: function (Response) {
                    console.log("Hellop");
                    console.log($('.ui.dropdown').dropdown('get value'));

                },
                url: 'http://192.168.219.130:8888/'
            },
        }
    )
$('.ui.dropdown').dropdown({});

非常感谢有人能指出我在语义UI框架中如何处理这个问题的正确方向。

Answer 1

您需要在发送API请求之前修改API请求网址和设置。这可以通过beforeSend对象的apiSettings回调来完成。

您的搜索初始化将如下所示：

$('.ui.search')
    .search
    ({
        apiSettings: {
            onBeforeSend: function(settings) {
                // Depending on your logic, modify your URL here
                settings.url = 'http://192.168.219.130:8888/';

                return settings;                    
            },

            onResponse: function (Response) {
                console.log("Hellop");
                console.log($('.ui.dropdown').dropdown('get value'));

            },
            url: 'http://192.168.219.130:8888/'
        },
    })

可以在semantic UI API usage page上找到更多信息。

语义UI - 在搜索框周围添加逻辑

1 个答案: