Javascript - 在自动完成结果上单击添加永久占位符

Question

希望您能帮助解决我代码中的这个 JavaScript 难题。我还在学习 javascript 和 jquery。我承认我有点生疏了，并试图再次回到编码中。我创建了一个搜索框自动完成功能。我在主 html 中创建了 javascript，并创建了一个名为 autocomplete.php 的附加 php 页面。我的自动完成功能正在工作，但现在我想要的是...当用户单击下面的自动完成选项之一时，它会弹出一个值，然后将一个 id 放入搜索框中，以便我们的系统更容易搜索，但是我还想添加一个永久占位符或描述他们点击内容的文本以及 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;
}

总的来说，需要帮助将属性转换为变量，然后获取该变量并将其弹出到 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>