Автозаполнение поля ввода из базы данных в WordPress

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 "

если я передам его как статический в источнике, например в source: ["option1", "option2", "option3"] в jquery, то он будет работать хорошо, но когда я передам его через переменную, подобную source: [value15] затем это покажет один вариант, как все шоу в ниже , "hdfgh", "ddd", "Zanga", "Susana", "ghjgf", "1212", "2", "dfhg", "vcn", "xcbxxb", "Beathe", "Corredor", " cvcxg "," 2 "," ghjk "," level41 " но я хочу показать это отдельно, как это, когда я ввожу innput как 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.файл.