我正在尝试根据用户选择的下拉框在搜索框周围添加一些逻辑。
搜索框:
<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 框架中处理此问题,我将不胜感激。
最佳答案
您需要在发送 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 上找到更多信息。 .
关于javascript - 语义 UI - 在搜索框周围添加逻辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32862225/