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;
}

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

Javascript - 在自动填充结果上添加永久占位符onClick

1 个答案: