jQuery Autocomplete (devbridge) Ajax 服务器端服务URL 搜索文件

Posted

技术标签:

【中文标题】jQuery Autocomplete (devbridge) Ajax 服务器端服务URL 搜索文件【英文标题】:jQuery Autocomplete (devbridge) Ajax Serverside serviceURL Search File 【发布时间】:2020-01-26 23:14:22 【问题描述】:

我正在使用带有 ajax 选项的 DevBridge jQuery Autocomplete 插件(使用 serviceURL 而不是查找)。我有一个查询数据库(WordPress FYI)并获得所有结果的 php 文件。因此,当用户在我的自动完成字段中输入内容时,它会显示所有结果,并突出显示他们的查询。显然,我的服务器端脚本应该处理搜索并仅根据用户的即时输入返回过滤结果。我只是不知道该怎么做。

我在网上找到了大量帖子,说明这是它应该如何工作的,但找不到根据用户输入内容返回过滤结果的 serviceURL 文件的任何工作示例。

这是我到目前为止的代码......

我的 jQuery...

$('#product_sku_autocomplete').autocomplete(
      serviceUrl: '/blah/blah/ajax-product-sku.php', 
      minChars: 1,
      onSelect: function (suggestion) 
          alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
      
  );

我的 ajax-product-sku.php 文件的内容。这将获取所有“产品”中自定义字段 (sku) 的所有各种元值

  if ( ! defined('ABSPATH') ) 
    require_once( '../../../../wp-load.php' );
  

  global $wpdb;

  $term = $_GET['query'];

  $query = $wpdb->get_col( $wpdb->prepare( "
        SELECT pm.meta_value FROM $wpdb->postmeta pm
        LEFT JOIN $wpdb->posts p ON p.ID = pm.post_id
        WHERE pm.meta_key = %s 
        AND p.post_status = %s 
        AND p.post_type = %s
    ", 'sku', 'publish', 'products' ) );

    $reply = array();
    $reply['query'] = $term;
    $reply['suggestions'] = array();

    foreach ($query as $sku) 
      $reply['suggestions'][] = array(
          "value" => $sku,
          "data" => $sku
      );
    

    echo json_encode($reply);

如果我直接访问 ajax-product-sku.php 的结果...

"query":null,"suggestions":["value":"52N242","data":"52N242","value":"52F230","data":"52F230","value":"52F235","data":"52F235"]

所以我得到了完整的结果列表(据我所知,格式正确),自动完成字段会检索这些结果,但是当您在自动完成字段中键入时,它会显示所有结果,而不仅仅是与用户已输入。

我怀疑我需要在我的 db $query 语句中的某处添加 $term var,但不确定如何。非常感谢任何帮助。

【问题讨论】:

【参考方案1】:

我想我明白了。非常简单的解决方案,但我的 sql 印章显然缺乏。需要在sql语句中添加LIKE条件。这是修改后的 ajax-product-sku.php 文件内容。

如果有人从编码或性能的角度有更有效的方法来处理这个问题,我会欢迎知识...

ajax-product-sku.php

  if ( ! defined('ABSPATH') ) 
    require_once( '../../../../wp-load.php' );
  

  global $wpdb;

  $term = $_GET['query']; // this is the var that autocomplete sends as users type.
  //$term = '1';

  $query = $wpdb->get_col( $wpdb->prepare( "
        SELECT pm.meta_value FROM $wpdb->postmeta pm
        LEFT JOIN $wpdb->posts p ON p.ID = pm.post_id
        WHERE pm.meta_key = %s
        AND p.post_status = %s
        AND p.post_type = %s
        AND pm.meta_value LIKE '%$term%'
    ", 'sku', 'publish', 'products' ) );

    $reply = array();
    $reply['query'] = $term;
    $reply['suggestions'] = array();

    foreach ($query as $sku) 
      $reply['suggestions'][] = array(
          "value" => $sku,
          "data" => $sku
      );
    

    echo json_encode($reply);

【讨论】:

以上是关于jQuery Autocomplete (devbridge) Ajax 服务器端服务URL 搜索文件的主要内容,如果未能解决你的问题,请参考以下文章

jQuery.Autocomplete实现自动完成功能(详解)

jQuery.autoComplete 多参数

JQuery UI之Autocomplete

JQuery UI之Autocomplete

JQuery Autocomplete实战

jquery - (...).autocomplete 不是一个函数