通过单击 AJAX 搜索值替换输入值

Question

我能够 return 来自 php 的结果值 sql 但是通过单击结果值我无法设置输入值，如何设置，谢谢。

脚本

    $(document).ready(function(){
        $('#input').on("keyup input", function(){
            var input = $(this).val();
            var result = $(this).parent().parent().next(".result");
            if(input.length){
                $.get("backend-search.php", {term: input}).done(function(data){
                    result.html(data);
                });
            } else{
                result.empty();
            }
        });

        $(document).on("click", ".result p", function(){
            $(this).prev().children().children('input[type="text"]').val($(this).text());
            result.empty();
        });
    });

HTML

 <div>

        <div>
            <ol style="list-style: none;">
                <li>
                    <input id='input' type="text" autocomplete="off" placeholder="Search..." />
                </li>
            </ol>

            <div class="result"></div>
        </div>


    </div>

Answer 1

$(document).ready(function () {
  $("#input").on("keyup input", function () {
    var input = $(this).val();
    var result = $(this).parent().parent().next(".result");
    if (input.length) {
      $.get("backend-search.php", {
        term: input,
      }).done(function (data) {
        result.html(data);
      });
    } else {
      result.empty();
    }
  });

  $(document).on("click", ".result p", function () {
    var result = $(".result"); //important
    $(this)
      .prev()
      .children()
      .children('input[type="text"]')
      .val($(this).text());
    result.empty();
  });
});

我认为添加这行代码应该可以解决您的问题。

Answer 2

您可以使用以下代码从结果中获取值并将其放入输入中。

    $(document).on("click", ".result", function(){
        $('#input').val($('.result').text());
    });

Answer 3

假设您的结果集如下所示：

<div class='result'>
    <p></p>
    <p></p>
    <p></p>
</div>

然后，如果您单击第二个 <p>:

，则研究此 select 或正在执行的操作

$(this).prev().children().children('input[type="text"]')

.prev() 将针对“紧邻的兄弟”。对于我们的示例，select 第一个 <p>;
接下来，.children() 在下 DOM 树中搜索 <p> 的子树。您没有向我们展示 HTML 的样子，但很可能它是纯文本，没有子项。即使它有一些（例如<span>），它也不会帮助我们回到<input>，这是错误的方向。

您确实需要先向向上搜索 DOM，直到找到包含输入的内容，然后再向下搜索。

$(this).parent().parent().find('input')

第一个.parent()将select <div class='result'>；
第二个将针对父级 <div>，其中包括您的输入和结果；
.find() 将从该节点搜索 down 寻找输入；

您可以简化它，并通过向同时包含输入和结果的元素添加 class 来使其在将来 HTML 更改时更安全一些。在您提到的评论中，您计划拥有多组，因此也许每个“组”都可以称为“搜索”：

<div class='search'>
    <ol> ... <input> ... </ol>
    <div class='result'> ... </div>
</div>

<div class='search'>
    <ol> ... <input> ... </ol>
    <div class='result'> ... </div>
</div>

现在使用 .closest() 可以更轻松地定位正确的元素：

$(this).closest('.search').find('input')

通过单击 AJAX 搜索值替换输入值

Replace Input Value by click on AJAX search value

html

javascript

php

jquery