Question

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

我已经研究过，并在此处找到了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);
                            }
                        }
                    });
                },

在SO上

Possible solution：（独立工作正常，但不能使用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 = [“about”，“above”，“within”，“without”];

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

Autocomplete|jQuery Ui - source声明：

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

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

Answer 4

当您使用$ .ajax和json dataType时，您的data.message是一个数组，您可以通过删除不必要的项目来过滤它。
假设ajax msg数组是从下面的示例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;
        }

    }

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

5 个答案: