我在将我的工作脚本实施到我的网站时遇到问题。本地自制脚本完美无缺。它使用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>
$("#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) ); } );
});