jQuery UI 自动完成对象 [英] jQuery UI autocomplete with objects

问题描述

我正在使用 jQuery 1.11.2 并尝试使用自动完成小部件来解析数据数组.我要在阵中的人，威尔史密斯和威廉达福.当我在文本字段中输入 Wi 时，我希望看到这两个名称都添加到下拉列表中，但我没有收到任何响应.这是代码的副本:

I'm using jQuery 1.11.2 and trying to get the autocomplete widget to parse a data array. I have to people in the array, Will Smith and Willem Dafoe. I expected to see both of the names be added to the dropdown list when I enter Wi in the text field, yet I get no response. Here is a copy of the code:

<script src="js/jquery/jquery-1.11.2.js"></script>
<script src="js/jquery/jquery-ui.js"></script>
<link rel="stylesheet" href="js/jquery/jquery-ui.css"/>
<link rel="stylesheet" href="js/jquery/jquery-ui.theme.css"/>

<script type="text/javascript">
$(function() {
    var data = [
        {
            "id": 1,
            "first_name": "Will",
            "last_name": "Smith",
            "created_at": "2015-01-27T13:09:20.243Z",
            "updated_at": "2015-01-27T13:09:20.243Z"
        },
        {
            "id": 2,
            "first_name": "Willem",
            "last_name": "Dafoe",
            "created_at": "2015-01-27T13:17:23.479Z",
            "updated_at": "2015-01-27T13:17:23.479Z"
        }
    ];
    // Below is the name of the textfield that will be autocomplete    
    $('#search').autocomplete({
        // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
        minLength: 2,
        // This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format.
        source:data,
        // This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the     suggestions which is the person.given_name.
        focus: function(event, ui) {
            $('#search').val(ui.item.first_name);
            return false;
        },
        // Once a value in the drop down list is selected, do the following:
        select: function(event, ui) {
            // place the person.given_name value into the textfield called 'select_origin'...
            $('#search').val(ui.item.first_name);
            // and place the person.id into the hidden textfield called 'link_origin_id'. 
            $('#link_origin_id').val(ui.item.id);
                return false;
        }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" ).data( "ui-autocomplete-item", item ).append( "<a>" + item.first_name + "</a>" ).appendTo( ul );
        // For now which just want to show the person.given_name in the list.                             
    };
});
</script>


Search: <input type="text" id="search" />

代码全部位于本地驱动器上的单个 html 文件夹中.此时不涉及服务器.另外，我检查了检查元素工具是否有错误，但没有显示任何资源，并且找到并加载了所有资源.

The code is all in a single html folder on the local drive. No server is involved at this point. Also, I've checked the inspect element tool for errors, but none are shown and all resources are found and loaded.

推荐答案

问题是自动完成无法呈现其功能的源.

The problem was Autocomplete couldn't render the source for its functioning.

您需要根据使用的 JSON 数据设置自动完成的来源，

You need to set the source of the autocomplete based on the JSON data present using ,

source: function (request, response) {
           //data :: JSON list defined
           response($.map(data, function (value, key) {
                return {
                    label: value.first_name,
                    value: value.id
                }
            }));
        
    },

而且，我还从代码中删除了 .data 回调.

And, I also removed the .data callback from the code.

这篇关于jQuery UI 自动完成对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！