单击搜索后，Jquery获取输入字段值

Question

我希望从我的输入中获取值并插入我的范围内，因此如果用户搜索mama并单击搜索，我应该得到用户输入的内容，如果是mama。

http://jsfiddle.net/4a9b7ovw/2/

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#textinput").keyup(function() {
    alert(this.value);
    $('#result').show(this.value);
  });
  
  $("button").bind("click", function() {
    $(this).prop("#result");
  });
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input id="textinput" size="45" name="textinput" type="text" placeholder="search" class="form-control input-md">

<button type="button" class="btn btn-default">Search</button>

<div>
  You are search for: <span id="result"> </span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用.text()而非.show()

结果：$('#result').text(this.value);

<强>演示

$(document).ready(function() {
  $("#textinput").keyup(function(e) {
    if (e.keyCode == 13)
    {
      $("button").trigger("click")
    }
    //alert(this.value);
    //$('#result').text(this.value);
  });
  
  $("button").bind("click", function() {
    $('#result').html($("#textinput").val())
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input id="textinput" size="45" name="textinput" type="text" placeholder="search" class="form-control input-md">

<button type="button" class="btn btn-default">Search</button>

<div>
  You are search for: <span id="result"> </span>
</div>

Answer 2

使用$("#result").html($("#textinput").val());

$(document).ready(function() {
  $("#textinput").keyup(function() {
    $('#result').show(this.value);
  });

  $("button").bind("click", function() {
    $("#result").html($("#textinput").val());
  });

});

Answer 3

像这样的东西

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#textinput").on("keyup",function(e) {
    if(e.which != 13)
    $('#result').html("")
  });
  
  $("#textinput").on("keypress",function(e) {
    if (e.which == 13)
     $('#someButton').trigger("click")

  });
  
  $("button").bind("click", function() {
    $('#result').html($("#textinput").val())
  });
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<input id="textinput" size="45" name="textinput" type="text" placeholder="search" class="form-control input-md">

<button type="button" id="someButton" class="btn btn-default">Search</button>

<div>
  You are search for: <span id="result"> </span>
</div>

＆＃13;

＆＃13;

＆＃13;

根据您的评论中的问题，请参阅更新

Answer 4

只需使用

 $("#result").text($("#textinput").val());

Answer 5

更改以下行：

$(document).ready(function() {
  $("#textinput").keyup(function() {
    alert(this.value);
    **$('#result').text(this.value);**
  });
});

Answer 6

$("button").bind("click", function() {
    $('#result').html($("#textinput").val());
});