将实时搜索的单击结果放入文本框中

时间:2017-01-24 16:13:44

标签: javascript jquery

我正在使用下面的脚本进行实时搜索,它运行正常。问题出现在Chrome浏览器中,当用户点击所需的结果时,它会插入到文本框中,但在Firefox中失败了。

其次,它不是仅将文本插入文本框,而是插入html标记。我想要的只是文本。

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

 });

4 个答案:

答案 0 :(得分:1)

我不同意这里的其他答案。您无法致电event.target,因为它会告诉您event未定义,因为您的参数参数为e,而非event

Chrome浏览器和IE浏览器都可以,因为如果没有定义,它们将提供event,但其他浏览器(如Firefox)则不会。{/ p>

您已将点击的元素保存在此处:

var $clicked = $(e.target);

那么为什么要存储它,只是突然切换到event.target.innerHTML

请改为:

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

我通过简单地使用您已经使用的$clicked变量修复了Firefox问题。为了只获取文本(而不是HTML),我使用了jQuery的.text()

工作示例:https://jsfiddle.net/yuztjbva/4/

答案 1 :(得分:0)

您可以使用jQuery.text方法

'Z'

答案 2 :(得分:0)

你必须改变这个:

[a-zA-Z0-9](?:-[a-zA-Z0-9])?

到此:

success: function(html) {

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

如果你只想要文字:

            success: function(html) {

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

答案 3 :(得分:-1)

textContent代替此innerHTML

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