Question

当用户在字段中输入内容时，我想显示来自WordPress数据库的建议。我写了下面的代码，但是不能完全按照我的意愿来工作。

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

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

如果我将它作为静态传递给源，例如jquery中的source：[“ option1”，“ option2”，“ option3”]，那么它将运行良好，但是当我通过诸如source：[value15]这样的变量传递给它时，它将显示一个选项，如下所示，“ hdfgh”，“ ddd”，“ Zanga”，“ Susana”，“ ghjgf”，“ 1212”，“ 2”，“ dfhg”，“ vcn”，“ xcbxxb”，“ Beathe”，“ Corredor”，“ cvcxg”，“ 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'
            }
        });
    });
});

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

在Wordpress

1 个答案: