[英]AJAX, JQuery Ud / PHP: POST Method Autocomplete not showing up
我當前正在使用具有“自動完成”功能的init創建一個Wordpress模板,該代碼如下。 目前,我的自動填充功能無法正常工作,並且什么也沒有顯示。 檢查系統,它給了我...
Uncaught ReferenceError: request is not defined
我最近有一個自動完成功能,但是無法使用自動完成功能鍵盤上下,輸入功能。 它可以使用鼠標,但不能使用鍵盤功能。 它位於wordpress模板上,目前僅由鼠標控制。 另一個關鍵因素是它是“ POST”而不是“ GET”。 另一個關鍵因素是我確實有一個隱藏的輸入字段,其ID稱為“搜索ID”。 隱藏的“ search-id”輸入字段將與id一起更新並發送到服務器,而“ search-box”輸入字段僅向用戶顯示完整說明,但是如果該值等於我們發送的只是ID。 可以在HTML和PHP中看到...請幫我為什么我的自動完成功能不起作用?
jQuery UI / AJAX
<script>
$(document).ready(function(){
$("#search-box").autocomplete({
minLength: 2,
source: function(request, response){
$.ajax({
type: "POST",
url: "autocomplete.php",
data:'keyword=' + req.term,
success: response,
dataType: 'json',
minLength: 2,
delay: 100
});
},
select: function(event, ui){
$("#search-box").val(ui.item.label);
$("#search-id").val(ui.item.value);
return false;
}
});
});
/* function selectCountry(val) {
$("#search-id").val(val);
$("#suggesstion-box").hide();
}
function updateSearchBox(el) {
$("#search-box").val($(el).html());
} */
</script>
HTML
<form role="search" name="remarks_lookup" id="myForm" method="post" class="search-form" action="remarks-look-up" >
<div style="background-color:#ffffff; width:100%; float:left; padding-bottom:25px; clear:both; ">
<div class="frmSearch " style="width:80%; float:left;" >
<label>
<input type="search" name="jurisdiction_search" id="search-box" placeholder="Enter County, City, or Client Name" autocomplete="off" />
<input type="hidden" name="search" id="search-id" />
<div class="box" id="suggesstion-box"></div>
</label>
</div>
<div style="width:20%; float:left; clear:right;">
<label>
<input style="width:100%; height: 50px;" type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</label>
</div>
</div>
</form>
Autocomplete.php
<?php
include_once "functions.php";
if(isset($_POST['keyword']))
{
$database = lookup_connectToDatabase();
$result = pg_query($database, "SELECT country, id, state FROM customers WHERE country iLIKE '" . $_POST["keyword"] . "%' OR id iLIKE '" . $_POST["keyword"] . "%' ORDER BY country");
if (!$result){
echo "<div class='show' align='left'>No matching records.</div>";
}else {
while($row=pg_fetch_assoc($result)){
$array[] = array(
'label' = $row['id'].': '.$row['country'].', '.$row['state'],
'value' = $row['id'],
);
}
echo json_encode ($array);
}
}
?>
總的來說,我想完成的工作是能夠使用鍵盤功能(例如上下箭頭,甚至在建議框上按Enter,然后讓search-id輸入字段顯示說明,他們必須按Enter再次,它將搜索ID發送到服務器。
過去一個月,我一直在努力解決此問題,以期找出解決自動完成功能的不同方法。 我是JSON,JQuery-UI和Ajax的新手。 我確實需要任何人的幫助才能在我的網站上完成此功能。 請幫忙!
如果您願意提供幫助並希望仔細查看代碼甚至進行測試,請告訴我。 我需要任何幫助以完成此自動完成功能。
想通了...。
jQuery UI
<script>
$(document).ready(function(){
$("#search-box").autocomplete({
minLength: 2,
source: function(request, response){
$.ajax({
type: "POST",
url: "autocomplete.php",
dataType: "json",
data:'keyword=' + request.term,
success: function(data){
response(data);
}
});
},
select: function(event, ui){
$("#search-box").val(ui.item.label);
$("#search-id").val(ui.item.value);
return false;
}
});
});
</script>
HTML
<form role="search" name="remarks_lookup" id="myForm" method="post" class="search-form" action="/VCSWeb/remarks-look-up/" >
<div style="background-color:#ffffff; width:100%; float:left; padding-bottom:25px; clear:both; ">
<div class="frmSearch " style="width:80%; float:left;" >
<label>
<input size="59" maxlength="75" type="search" name="jurisdiction_search" class="search_keyword" id="search-box" placeholder="Enter Jurisdiction, County, City, or Client Name" />
<input type="hidden" name="search" id="search-id" />
</label>
</div>
<div style="width:20%; float:left; clear:right;">
<label>
<input class="search_button" style="width:100%; height: 50px;" type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</label>
</div>
</div>
</form>
的PHP
<?php
if(isset($_POST['keyword']))
{
$database = lookup_connectToDatabase();
$result = pg_query($database, "SELECT country, id, state FROM customers WHERE country iLIKE '" . $_POST["keyword"] . "%' OR id iLIKE '" . $_POST["keyword"] . "%' ORDER BY country");
if (!$result){
echo "<div class='show' align='left'>No matching records.</div>";
}else {
while($row=pg_fetch_array($result)){
$array[] = array(
'label' => '('.$row['id'].') '.$row['country'].', '.$row['state'],
'id' => $row['country'].', '.$row['state'],
'value' => $row['id'],
);
}
echo json_encode ($array);
}
}
?>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.