如何使用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正在与上面的数组对象检查一起发送。任何人都可以帮我用这个代码，我可以如何定制这个。