語義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}，並將此字符串保留在外部，但是當用戶鍵入搜索時，我想修改保留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({}); 

非常感謝，如果有人能指出我如何在Semantic 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找到。