Put click results of Live Search into a textbox

Question

I'm performing a live search with my script below and it's working perfectly. The issue is in Chrome when the user clicks on the desired results it gets inserted into a textbox, but it's failing in Firefox.

Secondly, instead of inserting only the text into the textbox, it inserts html tags as well. What I want is the text alone.

 $(function() {

     $(".search_tab").keyup(function() {
         var searchid = $(this).val();
         var dataString = 'color=' + searchid;
         if (searchid != '') {
             $.ajax({
                 type: "POST",
                 url: "../search.php",
                 data: dataString,
                 cache: false,
                 success: function(html) {

                     $("#result").html(html).show();
                 }
             });
         }
         return false;
     });

     $("#result").on("click", function(e) {
         var $clicked = $(e.target);
         if (!$clicked.hasClass("search")) {
             $('input.search_tab').val(event.target.innerHTML);
             jQuery("#result").fadeOut();
         }
     });

     $('.search_tab').click(function() {
         jQuery("#result").fadeIn();
     });

 });

Answer 1

I disagree with the other answers here. You can't call event.target because it will tell you that event is undefined, as your event parameter is e , not event .

Chrome and IE are okay with this because they will provide event if it's not defined, though other browsers (like Firefox) will not.

---

You already save the clicked element here:

var $clicked = $(e.target);

So why store this, only to suddenly switch to event.target.innerHTML ?

Do this instead:

 $("#result").on("click", function(e) {
     var $clicked = $(e.target);
     if (!$clicked.hasClass("search")) {
         $('input.search_tab').val($clicked.text());
         $(this).fadeOut();
     }
 });

I've fixed the Firefox issue by simply using the $clicked variable that you were already using. To grab text only (and not the HTML), I've used jQuery's .text() .

Working example: https://jsfiddle.net/yuztjbva/4/

Answer 2

您可以使用jQuery.text方法

   $('input.search_tab').val($clicked.text());

Answer 3

You must change this:

success: function(html) {

                 $("#result").html(html).show();
             }

to this:

            success: function(html) {

                 $("#result").html(html.d).show();
             }

And if you want only text:

$("#result").html($(html.d).text()).show();

Answer 4

像这样的textContent而不是innerHTML ：

$('input.search_tab').val(e.target.textContent);