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

总的来说，需要帮助 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>

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

Javascript - Adding A Permanent Placeholder onClick on Autocomplete Results

html

ajax

jquery

placeholder