Javascript - Hinzufügen eines permanenten Placeholder onClick auf Autocomplete Ergebnisse

Question

Hoffentlich können Sie auf dieses Javascript Puzzle in meinem Code helfen. Ich lerne noch Javascript und jquery. Ich gebe zu, ich bin ein bisschen eingerostet und versuche wieder in die Programmierung zu kommen. Ich habe eine Suchbox Autocomplete erstellt. Ich habe das Javascript in meiner Haupthtml erstellt und eine zusätzliche PHP-Seite namens autocomplete.php erstellt. Meine automatische Vervollständigung funktioniert, aber jetzt möchte ich ... Wenn ein Benutzer auf eine der folgenden Vervollständigungsoptionen klickt, wird der Wert angezeigt, der dann eine ID in das Suchfeld für unser System einfügt, um einfacher zu suchen, aber Ich möchte auch einen dauerhaften Platzhalter oder einen Text hinzufügen, der beschreibt, worauf sie mit der ID klicken, aber der Text kann nicht von der Suche gelesen werden. Ich möchte nur die ID lesen. Aus diesem Grund dachte ich an einen dauerhaften Platzhalter.

Auf der PHP-Seite, die ich den Onclick Teil des Codes erstellt haben:

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

So habe ich erstellt zwei Arten von onClicks die selectCountry() und selectPlaceholder() sind.

Hier ist mein Javascript-Code auf der Indexseite:

$(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+"' ");  

} 

Wie Sie Ich versuche, den selectPlaceholder() in eine Variable zu drehen am Boden sehen und es dann in meinen Tag Pop, etwas zu schaffen wie data-placeholder = 'selectPlacehoder (value)'.

Hier ist mein 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> 

Hier mein CSS ist der Platzhalter permanent in der Lage

.placeholder 
{ 
    position: relative; 
} 

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

Insgesamt benötigen Hilfe bei der Javascripting Turing das Attribut in eine Variable zu machen, dann nehmen die Variable und poping es in einem HTML-Div-Typ-Tag.

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

} 

So ist das möglich? Wie können wir das tun? Muss ich eine ID erstellen und sie dann platzieren? Würde ich das in eine .prop legen müssen? Gibt es einen besseren Weg?

Answer 1

Wenn ich Ihr Problem verstehe, möchten Sie, dass der Benutzer den Text der ausgewählten Autovervollständigungsoption anzeigt, aber Sie möchten nur die Zeilen-ID an den Server senden. Ich würde in Betracht ziehen, das Suchfeld für die automatische Vervollständigung nicht die Eingabe zu machen, die an den Server gesendet wird. Stattdessen würde ich eine verborgene Eingabe mit erstellen und diese mit der Zeilen-ID aktualisieren, die an Ihren Server gesendet werden soll. Lassen Sie dann die Eingabe für die automatische Vervollständigung dem Benutzer die vollständige Beschreibung anzeigen. Das ist meiner Meinung nach eher konventionell.

So in den PHP Auto-Vervollständigen-Reihen:

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

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