从ajax响应中选择文本,并在用户单击项目时显示在输入字段中

时间:2017-09-08 06:12:35

标签: javascript php jquery ajax

  

用户输入从数据库获取的伦敦记录并显示在输入字段

下方
<input type="text" id="inputSuccess" name="name" onkeyup="autosearch(this.value)" > //user type london 
  

当用户点击伦敦而不是伦敦添加输入字段但是它无法在输入字段中设置jquery脚本需要从p标签中选择值并在输入字段中显示

<script>
function autosearch(name){
   //get data from database
   $.ajax({
       url:"ajax.php",
       type:'post',
       data: {name: name},
       success:function(result){
           $('.result').html(result);
       }
   });
}
</script>

ajax.php

<div style="border: 1px solid #ccc;width:100%;" >
   <a href="javascript:void(0)">
</div>
<div>
  <p><?php echo $data['cityName']; ?> </p> //london show here 
</div>
  </a>
</div>
 

2 个答案:

答案 0 :(得分:1)

如果我收到您的问题,那么这是一个示例,让您清​​楚如何在输入中添加文本。请在下面结帐:

<强> HTML:

<input type="text" id="inputSuccess" name="name" onkeyup="autosearch(this.value)" >

<a href="javascript:void(0)" data-val="textToShow" onclick="addTextInInput($(this).data('val'))">
  <div>
    <p>asd </p> 
  </div>
</a>

<强> JS:

function addTextInInput(txt){
 //get data from database
   $("#inputSuccess").val(txt)
 }

用您的textToShow代码替换data-val中的PHP并尝试使用。另外,请在此处找到工作示例https://jsbin.com/witilohinu/1/edit?html,js,console,output

请在评论中提供反馈。

答案 1 :(得分:0)

我不确定你想要的。但是我从你的代码中了解到这一点。如果它的错误说我。我会帮你解决这个问题。 添加<input>的类并将其设置为Ajax结果。

 <input type="text" id="inputSuccess" name="name" class='result'

       onkeyup="autosearch(this.value)" > //user type london


   <script>

   function autosearch(name){
 //get data from database
   $.ajax({
     url:"ajax.php",
    type:'post',
    data:{name:name},
    success:function(result){
      $('.result').html(result);
     }
  });
 }

</script>

你不需要这个领域。

<p><?php echo $data['cityName']; ?> </p> //london show here 
</div>