gpt4 book ai didi

javascript - JQuery 自动完成返回带有标签和值的数据数组,但不将标签显示为建议

转载 作者:行者123 更新时间:2023-12-03 00:18:08 27 4
gpt4 key购买 nike

我正在 WordPress 网站上使用 Jquery-autocomplete 进行 AJAX 调用(机场列表作为标签,机场 ID 作为值)。

返回的是一个包含标签和 ID 的数组,但输入没有显示任何内容,就像我只返回单个名称数组时一样。

数据来源:

function ajax_listings() {
global $wpdb;

//get names of all airports
$name = '%'.$wpdb->esc_like(stripslashes($_POST['name'])).'%';
$sql = "select airportid, completename
from _airports
where completename like %s";

$sql = $wpdb->prepare($sql, $name);

$results = $wpdb->get_results($sql);

$titles = array();
foreach( $results as $r ) {
$titles[] = array(
"label" => $r->completename,
"value" => $r->airportid
);
}

echo json_encode($titles);

die();
}

我的 AJAX 调用:

$('#start').autoComplete({
source: function(name, response) {
$.ajax({
type: 'POST',
dataType: 'json',
url: 'wp-admin/admin-ajax.php',
data: 'action=get_listing_names&name='+name,
dataType: 'json',
success: function( data ) {
response( $.map( data.d, function( item ) {
return {
label: item.label,
value: item.value
}
}));
}
});
},
select: function (event, ui) {
$('#start').val(ui.item.label); // display the selected text
$('#idstart').val(ui.item.value); // save selected id to hidden input
return false;
},
focus: function (event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
}
});

我希望文本输入仅显示项目标签作为建议,但我还需要将机场 ID 存储在隐藏输入中并稍后使用。

当我输入“MON”时返回的数组示例:

[101] {label: "PLP, Captain Ramon Xatruch Airport, La Palma, Panama", value: "5841"} 
[102] {label: "LTI, Altai Airport, Altai, Mongolia", value: "6370"}
...

最佳答案

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>

</body>
<script>
$( function() {
var availableTags = [
{ label: "ActionScript", value: "123" },
{ label: "AppleScript", value: "456" },
{ label: "Scheme", value: "Scheme" }
];
$( "#tags" ).autocomplete({
source: availableTags,
focus: function(event, ui ) {
// console.log(ui.item.label);
this.value = ui.item.label; // this doesn't work
}

});
} );
</script>
</html>

如果对您有帮助,请使用并享受评论,复制粘贴代码并将其用作您的要求

关于javascript - JQuery 自动完成返回带有标签和值的数据数组,但不将标签显示为建议,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54448661/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com