Семантический интерфейс - добавление логики вокруг окна поиска

Question

Я пытаюсь добавить некоторую логику вокруг окна поиска в соответствии с выбранным пользователем выпадающим списком.

Search Box:

<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}, и хранить эту строку извне, но когда пользователь вводит в поиск, я хотел бы изменить a var, который хранит переменную URL, и вставить ее в поле url apiSetting.

$('.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({}); 

весьма признателен, если кто-то может мне точку в правильном направлении, о том, как это могло быть обработано в семантическом рамках пользовательского интерфейса.

Answer 1

Вы хотите изменить URL-адрес запроса 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.