Question

我有一个名为“frined-replace”的div和一个autosuggestion字段。当页面加载显示的frined-replace div内的内容时。当我们在输入字段中写入内容进行搜索时，frined-replace将替换为自动提示的数据。现在的问题是，当我写一些东西时，frined-replace div被数据替换，当我删除输入的字段时，我就无法重新显示frined-replace div元素。

frined替换：

   <li style="float:left; width:240; margin:2px 0 4px 2px; border-bottom:1px solid #CCC; background-color:#f90; height:30px;">

        <a href="<?php echo $config->baseUrlTs;?>messages?user_id=<?php echo $myusrid;?>" > 
        <img src="<?php echo $config->baseUrl;?><?php echo $imgs;?>" alt="" width="26" height="26"  />
        <font style="font-weight:bold; color:white"><?php //global $config;
            echo $myusrname;
        ?></font></a>

        </li>

这是自我提供的部分：

$("#search").keyup(function(e){
var qr = $("#search").val();
         if(qr=="")
        {
            $("#erase").empty();
            return;
        }
$.ajax({
  url: "<?php echo $config->baseUrl;?>/themes/gr-mist/ajax/inbox-ajax.php?str="+$(this).val()+"&user_id="+<?php echo $userid;?>,
  context: document.body,
  success: function(data){

        $("#frined-replace").replaceWith(data);

        //$("#search").val('');
         //$('#search').val('').empty();

      }
   });
 });

Answer 1

我刚刚制作了一个代码段，显示了可能的答案

    $("#search").keyup(function(e){
        var qr = $("#search").val();
        if(qr=="") {
            $("#frined-replace").html($("#frined-replace-bck").html());
            $("#frined-replace-bck").remove();
            $("#erase").empty();
            return;
        }

        if (!$('#frined-replace-bck').length) {
           var backup = $("#frined-replace").clone();
           backup.prop('id', 'frined-replace-bck');
           backup.css('display', 'none')
           $("#frined-replace").before(backup);
        }

        //Replace with your ajax call
        $("#frined-replace").html('<li>' + qr + '</li>');

        //$("#search").val('');
        //$('#search').val('').empty();
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div>
      <input id="search" type="text"/>
      <div id="frined-replace">My initial content</div>
    </div>

Answer 2

我修好了。在我显示该div中的数据而不是用frined-replace div替换它之后，我创建了另一个显示为none的div。

 <style type="text/css">
#loadsearch
 {
  display:none;
  width: 250px;
  position: absolute;
  margin-top: -8px;
  height: 100px;
  z-index: 1;
  margin-left: 2px;
  height:auto;
  }

  </style>
  <div id="loadsearch">
  </div>

在jquery中

$("#search").keyup(function(e){
var qr = $("#search").val();
         if(qr=="")
        {
            $("#erase").empty();
            $("#loadsearch").hide();
            return;
        }
        $("#loadsearch").empty();
$.ajax({
  url: "<?php echo $config->baseUrl;?>/themes/gr-mist/ajax/inbox-ajax.php?str="+qr+"&user_id="+<?php echo $userid;?>,
  context: document.body,
  success: function(data){
        $("#loadsearch").show();
        $("#loadsearch").append(data);
        //Here i am showing the data inthe div instead of replacing

  },

   });
 });

更换后如何显示原始元素？

2 个答案: