Javascript - добавление постоянного места для хранения onClick на автозаполнение Результаты

Question

Надеюсь, вы сможете помочь в этом javascript-головоломке в моем коде. Я все еще изучаю javascript и jquery. Я признаю, что я немного ржавый и снова пытаюсь вернуться к кодированию. Я создал автозаполнение поисковой системы. Я создал javascript в своем основном html и создал дополнительную php-страницу с именем autocomplete.php. Моя автозаполнение работает, но теперь я хочу, чтобы это было ... Когда пользователь нажимает на один из вариантов автозаполнения ниже, он выдает значение, которое затем помещает идентификатор в поле поиска, чтобы наша система находилась проще, но Я также хочу добавить постоянный владелец места или текст, описывающий, что они нажимают вместе с идентификатором, но текст не может быть прочитан поиском. Я просто хочу прочитать идентификатор. В случае, поэтому, я подумал о постоянном заполнителе.

На странице 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 (значение)'.

Вот мой 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 Тьюринга атрибут в переменную, а затем принимать переменную и вставляя ее в тег типа div html.

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

} 

Это возможно? Как мы можем это сделать? Нужно ли создавать идентификатор, а затем разместить его? Должен ли я поместить это в .prop? Есть ли способ лучше?

Answer 1

Если я понимаю вашу проблему, вы хотите, чтобы пользователь увидел текст выбранного автозаполнения, но вы хотите отправить идентификатор строки на сервер. Я бы подумал, что автоматическое заполнение окна поиска не будет введено на сервер. Вместо этого я бы создал скрытый ввод с name=[search] и обновил его с идентификатором строки, который будет отправлен на ваш сервер, а затем пусть вход автозаполнения отобразит полное описание для пользователя. Это, по-моему, более условно.

Таким образом, в 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>