web-dev-qa-db-ja.com

オブジェクトによるjQuery UIオートコンプリート

私はjQuery 1.11.2を使用していて、オートコンプリートウィジェットにデータ配列を解析させようとしています。私はアレイの人々、ウィル・スミスとウィレム・デフォーにいる必要があります。テキストフィールドにWiと入力すると、両方の名前がドロップダウンリストに追加されるはずですが、応答がありません。これがコードのコピーです。

<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フォルダーにあります。この時点ではサーバーは関与していません。また、要素の検査ツールでエラーをチェックしましたが、何も表示されず、すべてのリソースが見つかり、ロードされています。

javascriptjqueryjquery-uijquery-ui-autocomplete
12
Darc Nawg

問題はAutocompleteが機能するようにソースをレンダリングできなかったことでした。

を使用して、存在するJSONデータに基づいてオートコンプリートのソースを設定する必要があります。

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

    },

また、コードから.dataコールバックも削除しました。

動作中のコードを見る ここ

23
Runcorn

有効な回答-正しいフィルタリングあり。request.termに対して何もチェックされていないため、承認された回答のフィルタリングは機能していませんでした。

        var mydata = 
[{"id": 1, "name": "John", "age": 23},
 {"id": 2, "name": "Mary", "age": 33},
 {"id": 3, "name": "Richard", "age": 53},
 {"id": 4, "name": "Ashley", "age": 25},
 {"id": 5, "name": "Kyle", "age": 17},
 {"id": 6, "name": "Samantha", "age": 29},
 {"id": 7, "name": "David", "age": 43},
 {"id": 8, "name": "Charles", "age": 27},
 {"id": 9, "name": "Elaine", "age": 41},
 {"id": 10, "name": "William", "age": 22}
];

$('#myautocomplete').autocomplete({
                minLength: 2,
                source: function (request, response) {
                        response($.map(mydata, function (obj, key) {
                                
                                var name = obj.name.toUpperCase();
                                
                                if (name.indexOf(request.term.toUpperCase()) != -1) {                           
                                        return {
                                                label: obj.name + " (" + obj.age + ")", // Label for Display
                                                value: obj.id // Value
                                        }
                                } else {
                                        return null;
                                }
                        }));                    
                },    
                focus: function(event, ui) {
                        event.preventDefault();
                },
                // Once a value in the drop down list is selected, do the following:
                select: function(event, ui) {
            event.preventDefault();
                        // place the person.given_name value into the textfield called 'select_Origin'...
                        $('#myautocomplete').val(ui.item.label);
                        // ... any other tasks (like setting Hidden Fields) go here...
                }
});     
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>    
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

e.g. Try the string "ar" for filtering<br/>
<input id="myautocomplete" type="text" placeholder="type some key string..." />
4
gene b.

私はそれを次のようにうまく機能させることができました：

$(document).on('ready',function(){
  $(function() {
    var arrLinks = [
    {% for u in users %}
      {
        nombres: "{{ u.names }} {{u.sur_names}}",
        email: "{{ u.username }}",
        documento: {{ u.identificationNumber }},
        telefono: {{ u.phone }},
        label: '{{ u.names }} {{u.sur_names}} / {{ u.username }} * Doc: {{ u.identificationNumber }} - Cel: {{ u.phone }}'
      },
    {% endfor %}
    ];
    $("input[name=search]").autocomplete({
        source: arrLinks
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>").data("item.autocomplete", item).append("<a>" + item.nombres + "</a>").appendTo(ul);
    };
  });

});

注：私はsymfonyを操作し、コントローラーからユーザーにオブジェクトを送信し、ビュー（twig）でFORを作成して、JavaScriptオブジェクトに必要なデータを割り当てます。検索するすべてのパラメーターをラベルに定義することが重要です。

デモ画像！

$(document).on('ready',function(){
      $(function() {
        var arrLinks = [
          {
            nombres: "Fernando León",
            email: "[email protected]",
            documento: 10695846754,
            telefono: 3208123307,
            label: 'Fernando León / [email protected] * Doc: 10695846754 - Cel: 3208123307'
          },
          {
            nombres: "Edgar Molina",
            email: "[email protected]",
            documento: 736282826,
            telefono: 30087654637,
            label: 'Edgar Molina / [email protected] * Doc: 736282826 - Cel: 30087654637'
          }
        ];
        $("input[name=search]").autocomplete({
            source: arrLinks
        }).data("ui-autocomplete")._renderItem = function(ul, item) {
            return $("<li>").data("ui-autocomplete-item", item).append("<a>" + item.nombres + "</a>").appendTo(ul);
        };
      });

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<input type="text" name="search">
1
Fernando León