5

我正在使用带有多个结果和远程数据源的 jquery 自动完成功能。我能够远程提取数据并选择多个结果。但是结果列表不会根据输入的前 2 个字符更新，并且 jQueryUI 文档在这个问题上很薄。

我进行了研究，并在 SO 上找到了这个答案，并希望将其与我的其他功能集成，但它不会更新结果列表。独立地，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的可能解决方案：（独立工作正常，但不适用于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 );
    }
});

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

4

5 回答 5

3

从jQuery UI 自动完成：从字符串开始搜索，您可以尝试： 

$("#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
       }
    });
于 2012-10-28T22:45:44.047 回答
1

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

var wordlist = [“关于”，“以上”，“内”，“没有”]；

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

自动完成|jQuery Ui - 来源指出：

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

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

于 2012-11-06T15:50:13.550 回答
1

当您将 $.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);
                }
            }
        });
    },
    ...
});
于 2012-11-06T19:41:06.897 回答
1

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

这是一个示例（在 CakePHP 中）。它获取“term”参数，其中包含用户输入的内容，并使用它来生成数据库查询。

于 2012-10-28T22:42:21.317 回答
0 
 $("#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;
        }

    }
于 2012-11-07T09:33:47.950 回答