Wordpress点击并使用自动完成功能进行搜索

时间:2018-02-13 13:32:25

标签: javascript php jquery ajax wordpress

我在将我的工作脚本实施到我的网站时遇到问题。本地自制脚本完美无缺。它使用jQuery自动完成。当我输入3个字母时,它将显示结果。当我点击结果时,它会自动搜索。

我正在尝试将此功能实现到我当前的搜索框中,但我无法让它工作。在我的本地文件中,我从数组中获得答案,但在我的Wordpress版本中,我使用Ajax请求来获取答案。

我不确定在我的WordPress函数中使用哪些参数。谁能帮帮我?

我的工作档案:

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="main.js"></script>
<title>Autocomplete</title>
</head>

<body>
    <label for="states">Geef een naam op:</label>
    <input id="states">
    <button id="go" style="display: none;" >GO</button>
    <div id="no-result" style="display: none;">State not found.</div>

    <p id="resultaten"></p>
    <script>
        function weergeven() {
        var x = document.getElementById("Medewerkers").value;
        document.getElementById("resultaten").innerHTML = x;


        }
    </script>

</body>
</html>

的Javascript

$("#states").keypress(function (event) {
    if (event.which == 13) {
        event.preventDefault();
        btnGoClick();
    }
});

$(function () {

    var stateList = [{
        "value": "Jurre"
    }, {
        "value": "hans"
    }, {
        "value": "Roy"
    }, {
        "value": "lars"
    }, {
        "value": "Ewald"
    }, {
        "value": "Remy"
    }, {
        "value": "Marvin"
    }, {
        "value": "Niek"
    }, {
        "value": "Arnold"
    }];

    $("#states").autocomplete({
        source: stateList,
        autoFocus: true,
        minLength: 3,
        select: function (event, ui) {
            btnGoClick(ui.item.value);
        }
    });
});



function btnGoClick(value) {
    document.getElementById("resultaten").innerHTML = value;
}

需要工作的地方:

<script>
jQuery( document ).ready(function(){
    jQuery('.autocompl').autoComplete({
        source: function(name, response) {
            jQuery.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'private link',
                data: 'action=get_listing_names&name='+name,
                success: function(data) {
                    response(data);
                }
            });         
        },
            select: function (event, ui) {
                console.log("Hij doet het");

        }

    });
}); 

function btnGoClick() {
    console.log("Hij doet het")
}

</script>

我的控制台上没有显示任何内容,没有错误或console.log

谁可以帮助我?

编辑:这是响应代码:

var wpAjax = jQuery.extend( {
    unserialize: function( s ) {
        var r = {}, q, pp, i, p;
        if ( !s ) { return r; }
        q = s.split('?'); if ( q[1] ) { s = q[1]; }
        pp = s.split('&');
        for ( i in pp ) {
            if ( jQuery.isFunction(pp.hasOwnProperty) && !pp.hasOwnProperty(i) ) { continue; }
            p = pp[i].split('=');
            r[p[0]] = p[1];
        }
        return r;
    },
    parseAjaxResponse: function( x, r, e ) { // 1 = good, 0 = strange (bad data?), -1 = you lack permission
        var parsed = {}, re = jQuery('#' + r).empty(), err = '';

        if ( x && typeof x == 'object' && x.getElementsByTagName('wp_ajax') ) {
            parsed.responses = [];
            parsed.errors = false;
            jQuery('response', x).each( function() {
                var th = jQuery(this), child = jQuery(this.firstChild), response;
                response = { action: th.attr('action'), what: child.get(0).nodeName, id: child.attr('id'), oldId: child.attr('old_id'), position: child.attr('position') };
                response.data = jQuery( 'response_data', child ).text();
                response.supplemental = {};
                if ( !jQuery( 'supplemental', child ).children().each( function() {
                    response.supplemental[this.nodeName] = jQuery(this).text();
                } ).length ) { response.supplemental = false; }
                response.errors = [];
                if ( !jQuery('wp_error', child).each( function() {
                    var code = jQuery(this).attr('code'), anError, errorData, formField;
                    anError = { code: code, message: this.firstChild.nodeValue, data: false };
                    errorData = jQuery('wp_error_data[code="' + code + '"]', x);
                    if ( errorData ) { anError.data = errorData.get(); }
                    formField = jQuery( 'form-field', errorData ).text();
                    if ( formField ) { code = formField; }
                    if ( e ) { wpAjax.invalidateForm( jQuery('#' + e + ' :input[name="' + code + '"]' ).parents('.form-field:first') ); }
                    err += '<p>' + anError.message + '</p>';
                    response.errors.push( anError );
                    parsed.errors = true;
                } ).length ) { response.errors = false; }
                parsed.responses.push( response );
            } );
            if ( err.length ) { re.html( '<div class="error">' + err + '</div>' ); }
            return parsed;
        }
        if ( isNaN(x) ) { return !re.html('<div class="error"><p>' + x + '</p></div>'); }
        x = parseInt(x,10);
        if ( -1 == x ) { return !re.html('<div class="error"><p>' + wpAjax.noPerm + '</p></div>'); }
        else if ( 0 === x ) { return !re.html('<div class="error"><p>' + wpAjax.broken  + '</p></div>'); }
        return true;
    },
    invalidateForm: function ( selector ) {
        return jQuery( selector ).addClass( 'form-invalid' ).find('input').one( 'change wp-check-valid-field', function() { jQuery(this).closest('.form-invalid').removeClass( 'form-invalid' ); } );
    },
    validateForm: function( selector ) {
        selector = jQuery( selector );
        return !wpAjax.invalidateForm( selector.find('.form-required').filter( function() { return jQuery('input:visible', this).val() === ''; } ) ).length;
    }
}, wpAjax || { noPerm: 'Sorry, you are not allowed to do that.', broken: 'An unidentified error has occurred.' } );

// Basic form validation
jQuery(document).ready( function($){
    $('form.validate').submit( function() { return wpAjax.validateForm( $(this) ); } );
});

0 个答案:

没有答案