1

我有一个带有 name 属性的对象数组,我想使用 jQueryUI 的自动完成功能使其可搜索。当一个字母被按下时,自动完成会显示一个文本,其中包含返回了多少结果。但是,当菜单关闭或文本框为空时,这不会更新。我想知道以下内容:

  1. 这种行为在哪里告诉我们菜单中有多少结果?我寻找通用字符串X results are available, use up and down arrow keys to navigate,但我没有看到它。
  2. 如果我只想触发某个函数,比如五个结果,该怎么办。如何覆盖导致此行为的任何基本 jQueryUI 函数?

小提琴:这里

  $(document).ready(function () {
            var objArray = [{
                name: 'James',
                department: 'Dept.1',
                experience: 1
            }, {
                name: 'Jessie',
                department: 'Dept. 2',
                experience: 2
            }, {
                name: 'Walt',
                department: 'Dept. 3',
                experience: 3
            }
           ];
            $(document.body).on('autocompletesearch', function (e, ui) {
                //hides the div whenever the value in the text box no longer matches
                //the name in the array
                $('.hider').hide();
            });
            //this function will take in an array
            //and a property and make a smaller array
            //which can be searched using the autocomplete
            function getRefArray(a, attr) {
                var newArray = [];
                for (var i = 0; i < a.length; i++) {
                    for (var prop in a[i]) {
                        if (prop == attr) {
                            newArray.push(a[i].name);
                        }
                    }
                }
                return newArray;
            }
            //when an element is selected from the autocomplete menu 
            //this functions returns a div to be bound to the page
            function getCard(n) {
                var $div = $('<div>').text(n).addClass('hider').show();
                return $div;
            }

            $('#autocomplete').autocomplete({

                source: getRefArray(objArray, 'name'),
                select: function (event, ui) {
                    var name = ui.item.value;
                    getCard(name).appendTo('body');
                },
                search: function (event, ui) {

                },
                open: function (event, ui) {

                },
                close: function (event, ui) {
                    console.log('closed menu, remove results count');
                }
            });
        });
4

0 回答 0