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> 

だから私はselectCountry（あるonClicksの2種類を作成している）と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）'のようになります。ここで

は

ここ

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

が

.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のヘルプが必要な場所にプレースホルダーを永続的に私のCSSで私のHTMLで、その後、服用しますその変数を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>