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"

}]

当用户输入＆＃39; aaj＆＃39;时，这是应该在文本框中显示的数据。在文本框中。

现在，当用户输入此类关键字时，我会尝试在搜索框中显示此数据

$("#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。然后，当选择一个时，具体获取选择对象数据。因此，我们会按照Multiple, Remote Demo的说明将source更改为function(request, response){}。这是我们将执行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。

＆＃13;

$("#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
          }
        }));
      }
    })
  }
});

＆＃13;

<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" />

＆＃13;

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

我尝试的任何东西除了这个都不起作用或给我不同的错误。任何人都可以告诉我如何自定义这个以显示图像，同时图像网址与上面的数组对象检查一起发送。任何人都可以帮我解决这个问题，我可以自定义这个。

如何使用jquery ui制作自动完成搜索框

3 个答案: