如何使用jQuery UI創建自動填充搜索框

Question

我在搜索框中使用jQuery UI進行自動填充。

所以這是我從控制器傳遞到包含JS的視圖的數組。

public function suggest_channel(){ 
     $this->load->library('mcurl'); 
     $arr_channel_title = array(); 
     $arr_main = array(); 
     if($this->input->is_ajax_request()) { 
      $keyword = $_POST['channel_url']; 
      $str_search_url = $this->youtube_api_url . "search"; 
      $arr_search_params 
      = array(
       'part' => 'snippet', 
       'q'  => $keyword, 
       'fields' => 'items', 
       'type' => 'channel', 
       'key' => $this->youtube_api_key, 
       'maxResults' => 10 
      ); 
      $this->mcurl->add_call(null, 'get', $str_search_url, $arr_search_params); 
      $yt_api_data = $this->mcurl->execute(); 
      $arr_response = json_decode($yt_api_data[0]['response'], TRUE); 

      foreach ($arr_response['items'] as $items) { 
       $arr_main[$x]['id'] = $items['snippet']['channelId']; 
       $arr_main[$x]['label'] = $items['snippet']['channelTitle']; 
       $arr_main[$x]['img_url'] = $items['snippet']['thumbnails']['default']['url']; 
       $x++; 
      } 

      echo json_encode($arr_main); 
     }  
    } 

這將返回像這樣

[{ 

    "id":"UCt4t-jeY85JegMlZ-E5UWtA", 
    "channel_name":"aajtaktv", 
    "img_url":"https:\/\/yt3.ggpht.com\/-ZE5JmiUBlGo \/AAAAAAAAAAI\/AAAAAAAAAAA\/JU-NHnMeaY8\/s512-c-k-no\/photo.jpg" 

}, 
{ 

    "id":"UCyyP7tUlQYhYCDmqafg7Rpg", 
    "channel_name":"DilliAajtak", 
    "img_url":"https:\/\/yt3.ggpht.com\/-V41A_NRHePA\/AAAAAAAAAAI\/AAAAAAAAAAA\/W13cwzn8Xws \/s512-c-k-no\/photo.jpg" 

}, 
{ 

    "id":"UCKeZdjO26bvvLOQ68-nAFhQ", 
    "channel_name":"AajTakAstro", 
    "img_url":"https :\/\/yt3.ggpht.com\/-mNkTltsXomk\/AAAAAAAAAAI\/AAAAAAAAAAA\/sFXYX5AIgnU\/s512-c-k-no\/photo.jpg" 

}] 

這是應當在文本框中顯示的數據時用戶在文本框中「AAJ」。

現在我想要當用戶進入這樣

$("#channel_url").keyup(function() { 
     var str_user_entered_channel_url= $("#channel_url").val(); 
     if(str_user_entered_channel_url.length >= 2){ 
      if(str_user_entered_channel_url != ''){ 
       $.ajax({ 
        url: "<?=base_url()?>chtool/suggest_channel", 
        data: {"channel_url" : str_user_entered_channel_url}, 
        type: "POST", 
        success: function(response) { 
         $("#channel_url").autocomplete({ 
          source: response 
         }); 
        } 
       });   
      } 
     }  
    }); 

關鍵字顯示在搜索框中輸入這個數據，但我沒有收到從自動完成任何建議。我需要將這些數據顯示在文本框中。誰能幫忙？

Answer 1

根據您的源數據，它對於自動填充而言過於複雜。它應該是一個簡單的選項數組。我已經安裝一個小測試：https://jsfiddle.net/ydL6vku7/

HTML

<div> 
    <label>Channel:</label> 
    <input type="text" id="channel_url" /> 
</div> 
<div id="results"> 
</div> 

JQuery的

var response = [{ 
    "id": "UCt4t-jeY85JegMlZ-E5UWtA", 
    "channel_name": "aajtaktv", 
    "img_url": "https:\/\/yt3.ggpht.com\/-ZE5JmiUBlGo \/AAAAAAAAAAI\/AAAAAAAAAAA\/JU-NHnMeaY8\/s512-c-k-no\/photo.jpg" 
}, { 
    "id": "UCyyP7tUlQYhYCDmqafg7Rpg", 
    "channel_name": "DilliAajtak", 
    "img_url": "https:\/\/yt3.ggpht.com\/-V41A_NRHePA\/AAAAAAAAAAI\/AAAAAAAAAAA\/W13cwzn8Xws \/s512-c-k-no\/photo.jpg" 
}, { 
    "id": "UCKeZdjO26bvvLOQ68-nAFhQ", 
    "channel_name": "AajTakAstro", 
    "img_url": "https :\/\/yt3.ggpht.com\/-mNkTltsXomk\/AAAAAAAAAAI\/AAAAAAAAAAA\/sFXYX5AIgnU\/s512-c-k-no\/photo.jpg" 
}]; 

$(function() { 
    var channel_names = []; 
    $.each(response, function(k, v) { 
    channel_names[k] = v.channel_name; 
    }); 
    console.log(channel_names); 
    $("#channel_url").autocomplete({ 
    source: channel_names, 
    minLength: 2, 
    select: function(event, ui) { 
     for (var i = 0; i < response.length; i++) { 
     if (ui.item.value == response[i].channel_name) { 
      $("#results").html("<p>ID: " + response[i].id + "</p><img src='" + response[i].channel_name + "' /><p>" + response[i].channel_name + "</p>"); 
     } 
     } 
    } 
    }); 
}); 

可正常工作，一旦我們已經創建了一個陣列中使用的。現在我們需要使它與遠程數據一起工作。這將會更具挑戰性。最好先做一個簡短的GET以獲得所有的channel_names。然後當選擇一個時，專門獲取該選擇對象數據。所以我們會將source更改爲function(request, response){}，如Multiple, Remote Demo所述。這是我們將執行AJAX的地方。它會是這個樣子：

$(function() { 
    $("#channel_url").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
     url: "<?=base_url()?>chtool/suggest_channel", 
     data: { 
      "channel_name": request, 
      "type": "array" 
     }, 
     type: "POST", 
     success: response 
     }); 
    }, 
    minLength: 2, 
    select: function(event, ui) { 
     $.ajax({ 
     url: "<?=base_url()?>chtool/suggest_channel", 
     data: { 
      "channel_name": ui.item.value, 
      "type": "object" 
     }, 
     type: "POST", 
     success: function(data) { 
      $("#results").html("<p>ID: " + data.id + "</p><img src=" + data.img_url + " /><p>" + data.channel_name + "</p>"); 
     } 
     }); 
    } 
    }); 
}); 

而且你可以調整你的PHP像這樣：

if($_POST['type'] == "object"){ 
    foreach ($arr_response['items'] as $items) { 
     $arr_main[$x]['id'] = $items['snippet']['channelId']; 
     $arr_main[$x]['channel_name'] = $items['snippet']['channelTitle']; 
     $arr_main[$x]['img_url'] = $items['snippet']['thumbnails']['default']['url']; 
     $x++; 
    } 
    echo json_encode($arr_main); 
} elseif($_POST['type'] == "array"){ 
    $arr_channel_names = []; 
    foreach ($arr_response['items'] as $items) { 
     array_push($arr_channel_names, $items['snippet']['channelTitle']); 
    } 
    echo json_encode($arr_channel_names); 
} 

我無法測試AJAX，因此下半年是未經檢驗的。我希望這有幫助。

編輯

我能模仿AJAX活動在這裏：https://jsfiddle.net/ydL6vku7/5/

Answer 2

您需要將數據轉換成一個由是可消化將jQuery UI的自動完成小部件，它記錄here。要使用ajax加載數據，您應該傳遞一個函數作爲source選項的值。此函數接收的是用戶在文本框中鍵入的值，如第一個參數的term屬性。所以你不必親自處理諸如keyup的事件。

爲了您的長度驗證，您可以使用minLength選項，而且您不必親自處理它。

下面的例子顯示瞭如何在客戶端做到這一點。

這裏是working demo。

$("#channel_url").autocomplete({ 
 
    minLength:2, 
 
    source: function(request, response) { 
 
    $.ajax({ 
 
     url: "<?=base_url()?>chtool/suggest_channel", 
 
     data: { 
 
     channel_url: request.term 
 
     }, 
 
     type: "POST", 
 
     success: function(resp) { 
 
     response($.map(resp, function(item) { 
 
      //---------^ converts the data structure 
 
      return { 
 
      label: item.channel_name, 
 
      value: item.id 
 
      } 
 
     })); 
 
     } 
 
    }) 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<input type="text" id="channel_url" />

Answer 3

@Twisty和@TJ謝謝你們了很多對我的幫助。 這就是我終於能夠做到的。

$("#channel_url").autocomplete({ 
     source: function(request, respond) { 
      $.post("<?=base_url()?>chtool/suggest_channel", { "channel_url": request.term }, function(response) { 
       respond(jQuery.parseJSON(response)); 
      }); 
     }, 
     minLength: 2, 
     select: function(event, int_ui) { 
      if (int_ui.item.id != null) { 
       fetchChannel(0,0,int_ui.item.id); 
      } else if (int_ui.item.value != null){ 
       fetchChannel(0,0,int_ui.item.value); 
      } 
      else { 
       event.preventDefault(); 
       $('#channel_url').val(''); 
      }    
     }      
    }); 

任何我試試，除了這不工作，或給我不同的錯誤。任何人都可以告訴我如何定製這個來顯示一個圖像，圖像url正在與上面的數組對象檢查一起發送。任何人都可以幫我用這個代碼，我可以如何定製這個。