在我的 ajax 成功中使用自动完成事件

Posted 2023-05-08

【中文标题】在我的 ajax 成功中使用自动完成事件

【英文标题】：Use the autocomplete event in the succes of my ajax

【发布时间】：2019-12-06 20:00:24

【问题描述】：

我想在我的应用程序中使用自动完成功能。我正在尝试使用 jquery UI 完成，但没有任何反应。我制作了一个 ajax 来获取具有用户编写的特定变量的所有列。查询正在运行，我的数组包含从服务器返回的所有列。有了这个查询响应，我尝试在成功的 ajax 中执行 jquery 自动补全，但正如我所说的，什么都没有发生。

你有什么想法吗？

function autoCompleteRegate()
$("#code_regate").keyup(function() 
    // AJAX de l'auto-complete
    var source = '/gestion/gestDepot/ajaxautocompleteregate';
    var codeRegate = $("#code_regate").val();
    $.ajax(
        type : "POST",
        url : source,
        async : false,
        dataType : 'json',
        data : 
            'codeRegate' : codeRegate
        ,
        success : function(response) 
            var availableTags = response;
            $("#code_regate").autocomplete(
                source: availableTags
            );
        
    );
);

public function ajaxautocompleteregateAction()

    $this->_helper->layout->disableLayout();
    $this->_helper->viewRenderer->setNoRender();

    $params = $this->_getAllParams();
    $codeRegate = $params['codeRegate'];

    $oDepotService = new Services_Depot();
    $response = $oDepotService->searchCodeRegate($codeRegate);

    echo json_encode($response);

Network query - form

Exemple of nothing happening

The answer from the server

【参考方案1】：

您必须直接传递cd_regate 数组而不是多维数组。一种解决方法是您可以在后端处理 json 输出：

public function ajaxautocompleteregateAction()

    $this->_helper->layout->disableLayout();
    $this->_helper->viewRenderer->setNoRender();

    $params = $this->_getAllParams();
    $codeRegate = $params['codeRegate'];

    $oDepotService = new Services_Depot();
    $response = $oDepotService->searchCodeRegate($codeRegate);
    $json = [];
    foreach ($response as $key => $value) 
        array_push($json, $value->cd_regate); // the output will be "[774970, 774690, 774700,... ]"
    

    echo json_encode($json);

【参考方案2】：

我会为您的 javascript 建议以下内容：

$("#code_regate").autocomplete(
  source: function(request, response)
    $.ajax(
      type : "POST",
      url : '/gestion/gestDepot/ajaxautocompleteregate',
      async : false,
      dataType : 'json',
      data : 
        'codeRegate' : request.term
      ,
      success : function(data) 
        response(data);
      
    );
  
);

这使用一个函数作为源。来自 API：

功能：第三种变体，回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成，包括 JSONP。回调有两个参数：

request 对象，具有单个 term 属性，它引用当前文本输入中的值。例如，如果用户在城市字段中输入 "new yo"，则自动完成项将等于 "new yo"。 response 回调，它需要一个参数：建议给用户的数据。此数据应根据提供的术语进行过滤，并且可以采用上述任何简单本地数据的格式。在请求期间提供自定义源回调以处理错误时，这一点很重要。即使遇到错误，您也必须始终调用response 回调。这可确保小部件始终具有正确的状态。

本地过滤数据时，可以使用内置的$.ui.autocomplete.escapeRegex函数。它将采用单个字符串参数并转义所有正则表达式字符，从而将结果安全地传递给new RegExp()。

当在文本字段中输入 1 个或多个字母时，这将传递给 request.term 下的函数，您可以通过 AJAX 将其发布到您的脚本中。当你得到data的结果时，它必须是一个数组或一个格式正确的对象。

希望对您有所帮助。