Javascript - 在自動完成結果上添加一個永久佔位符

Question

希望您可以在我的代碼中幫助解決這個JavaScript謎題。我仍然在學習JavaScript和jQuery。我承認我有點生疏，並試圖重新編碼。我創建了一個搜索框自動完成。我在我的主html中創建了javascript，並創建了一個名爲autocomplete.php的額外php頁面。我的自動完成工作，但現在我想要的是...當用戶點擊下面的一個自動完成選項時，它會彈出一個值，然後將一個ID放在搜索框中讓我們的系統更容易搜索，但我還想添加一個永久的佔位符或描述他們與id一起點擊的文本，但文本無法通過搜索來讀取。我只想讀取身份證。在這種情況下，這就是爲什麼我想到了一個永久佔位符。

在PHP頁我已創建的代碼的onclick部分：

<ul id="country-list" > 
     <?php 
     while($row=pg_fetch_assoc($result)){ 
     ?> <li onClick="selectCountry('<?php echo $row["id"]; ?>'); selectPlaceholder('<?php echo $row["country"].", ".$row["state"]; ?>');"> <?php echo "<strong>(".$row["id"].")</strong> ".$row["country"].", ".$row["state"]; ?> </li> 
     <?php } ?> 
</ul> 

因此，我已經創建了兩個類型onClicks其是selectCountry（）和selectPlaceholder（）的。

這是我的索引頁面上的JavaScript代碼：

$(document).ready(function(){ 
$("#search-box").keyup(function(){ 
    $.ajax({ 
    type: "POST", 
    url: "/VCSWeb/wp-content/themes/i-excel-child/autocomplete.php", 
    data:'keyword='+$(this).val(), 
    beforeSend: function(){ 
     $("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px"); 
    }, 
    success: function(data){ 
     $("#suggesstion-box ").show(); 
     $("#suggesstion-box").html(data); 
     $("#search-box").css("background","#FFF"); 
    } 
    }); 
}); 
}); 

function selectCountry(val) { 
$("#search-box").val(val); 
$("#suggesstion-box").hide(); 
} 

function selectPlaceholder(val) { 
$("placeholder").val("data-placeholder='"+val+"' ");  

} 

正如你可以在底部看到我試圖把selectPlaceholder（）到一個變量，然後彈出到我的標籤來創建的東西像data-placeholder ='selectPlacehoder（value）'。

這裏是我的HTML

<div class="frmSearch placeholder" style="width:90%; float:left;" ---> data-placeholder='text' <---(place javascript variable here) > 
<label>            
    <input size="59" maxlength="75" type="search" name="search" class="search_keyword" id="search-box" placeholder="Enter Jurisdiction, County, City, or Client Name" /> 
    <div class="box" id="suggesstion-box"></div> 

</label>            
</div> 

這裏是我的CSS使佔位符的位置

.placeholder 
{ 
    position: relative; 
} 

.placeholder::after 
{ 
    position: absolute; 
    left:150px; 
    top: 10px; 
    font-size:18px; 
    content: attr(data-placeholder); 
    pointer-events: none; 
    opacity: 0.6; 
} 

總體而言，需要用JavaScript編程圖靈屬性到一個變量幫助永久性的，然後取該變量並將其彈出到html div類型標記中。

function selectPlaceholder(val) { 
$("placeholder").val("data-placeholder='"+val+"' "); 

} 

那麼這是可能的嗎？我們應該怎麼做？我是否需要創建一個ID然後放置它？我需要把它放在.prop中嗎？有沒有更好的辦法？

Answer 1

如果我瞭解您的問題，您希望用戶看到他們選擇的自動填充選項的文本，但您只想將行ID發送到服務器。我會考慮不讓自動完成搜索框發送到服務器的輸入。相反，我會創建一個帶有name=[search]的隱藏輸入，並使用要發送到您的服務器的行ID更新該輸入，然後讓自動填充輸入向用戶顯示完整描述。在我看來，這更傳統。

所以在PHP自動完成行：

<ul id="country-list" > 
     <?php 
     while($row=pg_fetch_assoc($result)){ 
     ?> <li onClick="selectCountry('<?php echo $row["id"]; ?>'); updateSearchBox(this);"> <?php echo "<strong>(".$row["id"].")</strong> ".$row["country"].", ".$row["state"]; ?> </li> 
     <?php } ?> 
</ul> 

的Javascript：

function selectCountry(val) { 
    $("#search-id").val(val); 
    $("#suggesstion-box").hide(); 
} 

function updateSearchBox(el) { 
    $("#search-box").val($(el).html()); 
} 

主要HTML：

<div class="frmSearch" style="width:90%; float:left;"> 
<label>            
    <input size="59" maxlength="75" type="search" class="search_keyword" id="search-box" placeholder="Enter Jurisdiction, County, City, or Client Name" /> 
    <input type="hidden" name="search" id="search-id"/> 
    <div class="box" id="suggesstion-box"></div> 

</label>            
</div>