我有一个表单，可以使用Ajax从API检索数据。现在，它可以正常工作。当前形式如下：
<input id="search" type="text" autocomplete="on" name="query" placeholder="Zoek op handelsnaam" class="form-control">
<input type="text" class="form-control" id="handelsnaam" name="handelsnaam" placeholder="Handelsnaam">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
<script src="/wp-content/themes/betheme-child/js/script1.js"></script>
现在，我要使用我自己的输入字段来代替上面的输入字段。我要使用的字段看起来有些不同。我的样子：
//field 1 aka search
<input type="text" class="input-text " name="billing_myfield15" id="billing_myfield15" placeholder="" value="handelsnaam">
//field2
<input type="text" class="input-text " name="billing_myfield16" id="billing_myfield16" placeholder="" value="">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
<script src="/wp-content/themes/betheme-child/js/script1.js"></script>
看到这些字段具有不同的ID /类，这意味着我将不得不编辑我的JavaScript文件并调整一些内容。我试过了，但是对我来说没有用。如何修改当前的script1.js文件，使其与新字段兼容？
我的javascript文件如下所示（请注意，这是有效的文件）：
jQuery(document).ready(function($) {
$("#search").autocomplete({
source: function( request, response ) {
$.ajax({
url: "/wp-content/themes/betheme-child/api/openkvk.php",
dataType: "json",
data: {
'q' : request.term,
},
type: 'POST',
success: function( data ) {
response($.map(data.handelsnaam, function (item) {
return {
label: [item.handelsnaam, item.dossiernummer, item.plaats].join(' - '),
value: [item.handelsnaam, item.dossiernummer, item.plaats].join(' - '),
link: item.link
};
}));
}
});
},
minLength: 1,
select: function( event, ui ) {
if (ui.item){
$.ajax({
url: "/wp-content/themes/betheme-child/api/openkvk.php",
data: {
'id' : ui.item.link,
},
type: 'POST',
success: function(data) {
$("#handelsnaam").val([data.handelsnaam]);
},
error: function() {
},
})
}
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
我自己尝试了一下，并更改了javascript文件中的一些内容。我的最终看起来像这样：
jQuery(document).ready(function($) {
$("#billing_myfield15").autocomplete({
source: function( request, response ) {
$.ajax({
url: "/wp-content/themes/betheme-child/api/openkvk.php",
dataType: "json",
data: {
'q' : request.term,
},
type: 'POST',
success: function( data ) {
response($.map(data.handelsnaam, function (item) {
return {
label: [item.handelsnaam, item.dossiernummer, item.plaats].join(' - '),
value: [item.handelsnaam, item.dossiernummer, item.plaats].join(' - '),
link: item.link
};
}));
}
});
},
minLength: 1,
select: function( event, ui ) {
if (ui.item){
$.ajax({
url: "/wp-content/themes/betheme-child/api/openkvk.php",
data: {
'id' : ui.item.link,
},
type: 'POST',
success: function(data) {
$("#billing_myfield16").val([data.handelsnaam]);
},
error: function() {
},
})
}
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
还有一个PHP文件。
<?php
$key = "secret";
if(isset($_REQUEST["q"])){
$q = $_REQUEST["q"];
suggest($q, $key);
}
if(isset($_REQUEST["id"])){
$id = $_REQUEST["id"];
getCompany($id, $key);
}
function getCompany($id, $key){
$url = "https://api.overheid.io".$id;
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json', 'ovio-api-key: '.$key));
$result=curl_exec($ch);
curl_close($ch);
header('content-type: application/json');
echo $result;
}
function suggest($q, $key){
$url = "https://api.overheid.io/suggest/openkvk/".$q."?size=25&fields[]=handelsnaam";
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json', 'ovio-api-key: '.$key));
$result=curl_exec($ch);
curl_close($ch);
header('content-type: application/json');
echo $result;
}
?>