如何显示替换为后的原始元素

How to show the original elements after the replace with?

本文关键字：原始 元素 替换 何显示 显示      更新时间：2023-09-26

我有一个名为"frined-replace"的div和一个自动建议字段。当页面加载所示的frined-replacediv中的内容时。当我们在输入字段中写入要搜索的内容时，frined替换将替换为autosuggestion的数据。现在的问题是，当我写一些东西时，frined-replace-div被数据替换，当我擦除我输入的输入字段字符时，我不能重新显示frined-place-div元素。

冰箱更换：

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

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

    $("#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>

我修复了它。在显示该div中的数据后，我制作了另一个不显示的div，而不是用frined替换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
  },
   });
 });
相关文章：