Add text to input field (and always replace current text)

Question

I need your help.

I added a hidden list to a input search field. The list opens when you click into the input field and closes when you click anywhere on the body. I now want to add the text of the list to the input form when you click on it. That means all text that is currently in the input field will get replaced with the new text from the list. For instance if you click on "Montego Bay" it will be added to the input field and also replace the current text in that field.

The input field:

<input required id="HotelsPlacesEan" name="city" type="search" class="form input-lg RTL search-location deleteoutline" placeholder="Test" value="<?php echo $themeData->selectedCity; ?>" required />

The list:

<div class="suggest-div">
         <span class="suggest-content hiddd">
            <ul class="liststyle">
               <li class="whylist"><b>Popular Destinations</b></li>
               <li class="suggest"><a class="selectlink" href="">Montego Bay</a></li>
               <li class="suggest"><a class="selectlink" href="">Negril</a></li>
               <li class="suggest"><a class="selectlink" href="">Ocho Rios</a></li>
               <li class="suggest"><a class="selectlink" href="">Kingston</a></li>
               <li class="suggest" style="border-bottom:0px;"><a class="selectlink" href="">Port Antonio</a></li>
            </ul>
         </span>
      </div>

My current javascript (not ideal, I know)

<script type="text/javascript">

$(".opensuggest").click(function() {
    $(".suggest-content").toggleClass("hiddd");
    $("body").click(function() {
        $(".suggest-content").addClass("hiddd");
    });
});

</script>

Current CSS:

<style>

a.selectlink {
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
}

a.selectlink:hover {
  color: #fff;
}

ul.liststyle {
  margin-top: 0px;
}

li.whylist {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #ddd;
  color: #000;
  padding-left: 10px;
  font-size: 15px;
  font-weight: 100;

}

li.suggest {
  border-bottom: 1px solid #ddd;
  font-size: 15px;
  font-weight: 100;
}

li.suggest:hover {
  background-color: #515B62;
  color: #fff;
}

.suggest-div {
  position: absolute;
  width: 100%;
}

span.suggest-content {
  display: block;
  background-color: #fff!important;
  margin-top: 0px;
  line-height: 1.2;
  position: absolute;
  width: 100%;
  z-index: 999;

}

.hiddd {
  display: none!important;
}

.form {font-weight: 100!important;}
</style>

I would greatly appreciate your help, I gave my best.

`$(element).val(newvalue)` will replace the value of the element. — Barmar, Apr 07 '17 at 16:12
It's almost never right to bind one event handler inside another one. Every time the user clicks on `.opensuggest` you'll add another click handler to `body`. — Barmar, Apr 07 '17 at 16:15
imho he wants it to behave like a select, yes. Ideally, OP would just use a select...unless there's a technical reason for divs? — John Vandivier, Apr 07 '17 at 16:16

score 4 · Accepted Answer · answered Apr 07 '17 at 16:17

4

Use .text() to get the text of the link in the list, and use .val() to replace the value of the input field.

$(".selectlink").click(function(e) {
    e.preventDefault();
    $("#HotelsPlacesEan").val($(this).text());
});

answered Apr 07 '17 at 16:17

Barmar

741,623
53
500
612

Thanks that did it! Could you tell me how I can hide the list again when someone clicks anywhere outside the list? Click on body does not work 100%. For instance when someone clicks on a datepicker, the list won't hide. What could I do? – Max Scho Apr 07 '17 at 16:33
[how to detect a click outside an element](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) – Barmar Apr 07 '17 at 16:38

score 0 · Answer 2 · answered Apr 07 '17 at 16:19

$("body").click(function() {
    $(".suggest-content").addClass("hiddd");
});

change this snippet from your code with

$(this).addClass('hiddd');

please

i think you only want to hide the active clicked item. otherwise your code makes an endless loop and tries to hide all the items with this class.

Add text to input field (and always replace current text)

2 Answers2