在wordpress中自动完成数据库中的输入字段

Question

当用户输入字段时，我想在 WordPress 中显示来自数据库的建议。我写了下面的代码，但它并没有完全按照我想要的方式工作。

实际上我通过 php 从数据库中获取数据到一个空白的 div 名称 primaryy php 的输出显示如下所示
, '' , '' , '' , '' , '' , '' , '' , '' , '' , '' , '' , '' , 'hdfgh' , 'ddd' , '' , 'Zanga '，''，''，''，''，''，''，'Susana'，''，'ghjgf'，''，''，'1212'，'2'，''，'' , 'dfhg' , 'vcn' , '' , 'xcbxxb' , '' , '' , '' , 'Beathe' , 'Corredor' , '' , '' , '' , '' , '' , '' , 'cvxg' , '' , '' , '2' , 'ghjk' , 'level41' , '' , '' , ''

我用 jquery 删除黑色 ,'' 并将 ' 替换为 " 之后输出将如下所示 ，“hdfgh”，“ddd”，“Zanga”，“Susana”，“ghjgf”，“1212”，“2”，“dfhg”，“vcn”，“xcbxxb”，“Beathe”，“Corredor”，“ cvxg" , "2" , "ghjk" , "level41"

如果我在源中将它作为静态传递，比如在 jquery 中的 source : ["option1","option2","option3"] 那么它会表现良好但是当我通过像 source:[value15] 这样的变量传递它时它将显示一个选项，如下面的所有显示 ，“hdfgh”，“ddd”，“Zanga”，“Susana”，“ghjgf”，“1212”，“2”，“dfhg”，“vcn”，“xcbxxb”，“Beathe”，“Corredor”，“ cvxg”、“2”、“ghjk”、“level41” 但是当我输入像 hdf 这样的输入时，我想像这样单独显示它，然后建议选项将显示 hdfgh，它在上述选项中

谁能帮帮我

jQuery(document).ready(function() {
    jQuery('#primaryy').text( jQuery('#primaryy').text().replace(/\'/g, '"') );
    jQuery('#primaryy').text( jQuery('#primaryy').text().replace(/\, ""/g, '') );
 
    var value14 =   jQuery("#primaryy").text();
    
    var value15 = value14;
    jQuery(function() {
        jQuery("#washer_92").autocomplete({
            source: [value15],
            select: function(event, ui) {
                jQuery(event.target).val(ui.item.value);
               
                return false;
            },
            minLength: 1
        });
    });
});

<div class="wrapp">
    <div id="primaryy" class="content-area">
	  <table border="1">
	  <?php 
         global $wpdb;
$result = $wpdb->get_results("SELECT * FROM aves_postmeta where meta_key ='4_level_first'");
foreach($result as $print){
$dbdata=$print->meta_value; ?>
<tr>
<td><?php echo ", '".$dbdata."' "; ?></td>
</tr>
</table>
<?php
}
		?></div></div>
<input type="text" id="washer_92">

Answer 1

我注意到您将输入值作为源传递，这将使您无处可去，因为这在您的页面第一次加载时基本上是未设置的，并且也没有调用您的 ajax 句柄来执行任何数据库操作。 要解决此问题，请按如下所述更改您的代码：

jQuery(document).ready(function($) {
    function splitsource( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
        return splitsource( term ).pop();
    }
    $('#primaryy').on('keypress', function(event) {
        if ( (event.keyCode === $.ui.keyCode.TAB || event.keyCode === $.ui.keyCode.ENTER) && $( this ).autocomplete( "instance" ).menu.active ) {
            event.preventDefault();
        }
        $('#primaryy').text( jQuery('#primaryy').text().replace(/\'/g, '"') );
        $('#primaryy').text( jQuery('#primaryy').text().replace(/\, ""/g, '') );
        $(this).autocomplete({
            source: function( request, response ) {
                var re = $.ui.autocomplete.escapeRegex(request.term);
                var matcher = new RegExp("^" + re, "i");
                $.getJSON( ajax_object.ajax_url+"?action=search_names&term="+re, function(data){
                    response($.map(data, function (v, i) {
                            return {
                                label: v.value,
                                value: v.value,
                                id: v.id
                            };
                        }));
                } );
            },
            search: function() {
                // custom minLength
                var term = extractLast( this.value );
                if ( term.length < 2 ) {
                    return false;
                }
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function (event, ui){
                //Perform any custom action that you might want on the keyword being selected.                          
            },
            minLength: 3,
            classes: {
                "ui-autocomplete": 'primaryy-custom-combobox-menu'
            }
        });
    });
});

请注意，您应该有一个注册为 search_names 的 ajax 句柄，并且您应该在那里执行必要的数据库操作并将结果返回到 js 文件中的自动完成函数。