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

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} 并在外部保留此字符串，但是当用户在搜索中键入时，我想修改 var 保留 URL 变量，并将其插入 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 请求 URL 和设置。这可以通过 apiSettings 对象的 beforeSend 回调来完成。

您的搜索初始化看起来像这样：

$('.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 - 在搜索框周围添加逻辑

Semantic UI - Adding Logic Around Search Box

javascript

jquery

semantic-ui