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

Posted 2023-05-08

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

【英文标题】：jqueryui autocomplete filter results (from remote datasource ) that "begin with" input

【发布时间】：2012-10-18 07:03:44

【问题描述】：

我正在使用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 );
    
);

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

【问题讨论】：

您可以在服务器上过滤您的结果吗？这样您甚至不必担心在 JS 中进行过滤。

@AndrewWhitaker - 那将是理想的；我正在研究这两种选择，并试图看看哪一种最先结出果实。

【参考方案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
       
    );

【讨论】：

谢谢你；您的成功函数中的代码实际上与我的问题中的代码相同，只是在源函数中。我移动了我的代码以匹配这个，但不幸的是，它不起作用。

@chowwy 你能展示你的完整代码吗？此外，您可以像其他人提到的那样调整数据库查询，从字符串的开头进行搜索。

我的代码是来自 jQuery Autocomplete 站点 (jqueryui.com/autocomplete/#remote) 的远程数据源代码，在我的问题中对函数的源部分进行了调整。

@chowwy 那么听起来你需要调整db查询以从字符串的开头开始匹配。

@chowwy 你不应该两者都做。一个或另一个应该适合你。

【参考方案2】：

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

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

【讨论】：

谢谢，但我的查询工作正常。我想根据我键入的前几个字符自定义显示在输入下方的结果的问题。现在，数据库中的所有结果都显示出来了。

如果所有结果都显示出来了，可能会使查询返回更少的结果。

【参考方案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 请求，以便用于过滤查询中的数据。请务必让我知道它是如何进行的。

【参考方案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);
                
            
        );
    ,
    ...
);

【参考方案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;