jqueryui 自动完成过滤器结果（来自远程数据源）“开始于”输入

Question

我正在使用jquery autocomplete with multiple results and a remote datasource。我能够远程提取数据并选择多个结果。 但结果列表不会根据输入的前 2 个字符更新，并且 jQueryUI 文档在这个问题上很薄。

我进行了研究，并在 SO 上找到了this answer，并希望将其与我的其他功能集成，但它不会更新结果列表。独立地，SO 答案可以正常工作，但在与多个结果和远程数据源集成时就不行了。

来自自动完成/远程源/多重功能（截断）。这部分工作正常：

.autocomplete({
                source: function( request, response ) {                            
                     $.ajax({
                        url: "/controller/myfunction",
                        dataType: "json",
                        data: request,
                        success: function(data){
                        if(data.response == 'true') {
                            response(data.message);
                            }
                        }
                    });
                },

Possible solution on SO:（独立工作正常，但不适用于 jquery/remote/multiple 代码）：

var wordlist= [ "about", "above", "within", "without"];

$("#input1").autocomplete({
    source: function(req, responseFn) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var a = $.grep( wordlist, function(item,index){
            return matcher.test(item);
        });
        responseFn( a );
    }
});

我需要将此解决方案与我的代码集成。

Answer 1

来自jQuery UI Autocomplete: Search from Beginning of String你可以试试：

$("#YOUR_TEXT_INPUT").autocomplete({
    source: function(req, response) { 
       $.ajax({
        url: "/controller/myfunction",
        dataType: "json",
        success: function( data ) {
            var re = $.ui.autocomplete.escapeRegex(req.term);
            var matcher = new RegExp( "^" + re, "i" );
            response($.grep(data, function(item){return matcher.test(item.value);}) );
            }
        });
     },
      minLength: 2,
      select: function(event, ui) {
          //custom select function if needed
       }
    });

Answer 2

jQuery autcomplete 将用户输入的内容作为 HTTP 参数发送，因此您可以使用它来更改从数据库中获取的结果。

Here is an example（在 CakePHP 中）。它获取“term”参数，其中包含用户输入的内容，并使用该参数生成数据库查询。

Answer 3

最好是控制器以 JSON 格式提供过滤后的数据。我建议您最好尝试在控制器中而不是在视图中过滤数据。如果您的应用程序是面向 MVC 的，您应该将所有查询和过滤保留在您指定的控制器操作中使用的模型内。我确实认为应该使用 AJAX（异步 Javascript 和 XML）将尽可能多的负载传递给服务器。所以，你的视图代码会很简单

var wordlist= [“关于”、“高于”、“内部”、“没有”];

$("#input1").autocomplete({
    source: 'url-to-controller/myAction', //Notice I'm using a string
    minLength: 2
});

Autocomplete|jQuery Ui - source 声明：

...当使用字符串时，自动完成插件期望该字符串 指向将返回 JSON 数据的 URL 资源。它可以在 相同的主机或不同的主机（必须提供 JSONP）。自动完成 插件不过滤结果，而是添加了一个查询字符串 带有term 字段，服务器端脚本应使用该字段 过滤结果。例如，如果源选项设置为 "http://example.com" 和用户类型 foo，GET 请求将是 发给http://example.com?term=foo。数据本身可以在 与上述本地数据格式相同。

基于上述内容，您可以修改控制器操作，使其使用term GET 请求，以便用于过滤查询中的数据。请务必让我知道它是如何进行的。

Answer 4

当您将 $.ajax 与 json dataType 一起使用时，您的 data.message 是一个数组，您可以通过删除不必要的项目来过滤它。
假设 ajax msg Array 是从下面的示例 json 构建的，

{"id":"Nycticorax nycticorax","label":"Black-crowned Night Heron","value":"Black-crowned Night Heron"},{"id":"Ardea purpurea","label":"Purple Heron","value":"Purple Heron"},{"id":"Circus cyaneus","label":"Hen Harrier","value":"Hen Harrier"},{"id":"Alcedo atthis","label":"Common Kingfisher","value":"Common Kingfisher"},{"id":"Oxyura leucocephala","label":"White-headed Duck","value":"White-headed Duck"},{"id":"Oenanthe oenanthe","label":"Northern Wheatear","value":"Northern Wheatear"},{"id":"Tadorna tadorna","label":"Common Shelduck","value":"Common Shelduck"},{"id":"Ardea cinerea","label":"Grey Heron","value":"Grey Heron"},{"id":"Ficedula hypoleuca","label":"Eurasian Pied Flycatcher","value":"Eurasian Pied Flycatcher"},{"id":"Motacilla flava","label":"Blue-headed Wagtail","value":"Blue-headed Wagtail"},{"id":"Muscicapa striata","label":"Spotted Flycatcher","value":"Spotted Flycatcher"},{"id":"Accipiter gentilis","label":"Northern Goshawk","value":"Northern Goshawk"}

所以我们想要检查“值”是否以输入的术语开头。
你可以简单地用这个替换你的自动完成代码：

.autocomplete({
    source: function( request, response ) {                            
            $.ajax({
            url: "/controller/myfunction",
            dataType: "json",
            data: request,
            success: function(data){
                if(data.response == 'true') {
                    var t = true;
                    var i = 0;
                    var ptrn = new RegExp("^" + request.term, "i");
                    while (t) {
                        if (!ptrn.test(data.message[i].Name)) {
                            data.message.splice(i, 1)
                        } else {
                            i++
                        };
                        if (i == data.message.length) {
                            t = false;
                        }
                    }
                    response(data.message);
                }
            }
        });
    },
    ...
});

Answer 5

 $("#certi_name").autocomplete({
                source: "/controller/myfunction",
                minLength: 2,
                select: function(event, ui) {
                    $('#certi_name').val(ui.item.value);
                    $('#certi_id').val(ui.item.id);

                }
            });

这是我的功能。我正在使用它并且工作正常。

function certificationsAction()
    {
        $cert_obj = new Model_Certification();
        $obj=$this->getRequest();
        $term=$obj->getParam('term');//You will get passing keyword with the name term
        if($term)
        {
            $ins_arrs=$cert_obj->getMatchingCertifications($term);
            $return_arr = array();
            foreach($ins_arrs as $ins)
            {
                $row_arr['id']=$ins['certification_id'];
                $row_arr['value']=$ins['certification_name'];
                array_push($return_arr, $row_arr);
            }
            echo json_encode($return_arr);die;
        }

    }