javascript - PHP 添加函数

Question

大家好，我刚刚开始学习 php，并且能够弄清楚如何从我的数据库中执行搜索功能以获取信息。到目前为止唯一不起作用的一点是，当我获得该信息时，用户单击“添加”似乎不起作用。所以我想要发生的事情就像一个购物 list 。用户搜索我的数据库并找到他想要的东西。然后单击添加。在搜索框下方，将出现带有该词的另一个框。所以他知道它已被添加。然后在此之后我可以添加一个十字架，他们可以单击它并根据需要摆脱该项目。但是我已经尝试过解决这个问题但似乎无济于事。解决这个问题的任何帮助都会很棒。

到目前为止的代码:

   <input type="text" name='search_term' id="search_term" class="searchFunction">
    <input type="submit" value="Add">
    <div class="dropdown">
        <ul class="result"></ul>
    </div>

我已经尝试了屏幕上的点击功能，但我只是点击了一个无效的帖子，所以任何帮助都会很好。让我开始的东西，这样我就可以开始玩代码，看看我能做什么等等。

基本上是的，一旦用户从返回的结果中点击添加，我希望在其下方出现一个带有该名称的框，例如:Example你看到当你在那个网站上搜索一种成分然后点击添加时，它是如何出现在它下面的吗？这就是我想要的

P.S 我知道 sql 注入(inject) :) 但现在一次一个步骤 x

Answer 1

首先我们需要将输入类型更改为 button 这样您就不会提交任何内容并且页面不会刷新。您还需要为其添加一个 id。例如 addButton。我们需要一个 div 来放置我们选择的东西

<div id="selectedStuff"></div>

一个问题是 ul 的监听器。我认为它不会起作用，因为您在听众之后添加了建议。您需要销毁监听器并在加载 ajax 函数后再次添加它，以便它会影响结果。

$.post( document.location.href, { search_term:search_term }, function( data ) {
    $('.result').html( data );    
    $('.result').off('click').on('click', 'li', function( event ) {
        var result_value = $(this).text();
        $('#search_term').val(result_value);
        $('.result').html('');
    });
});

现在让我们添加按钮监听器，您需要将所选项目放入 div 中。

$('#addButton').on('click', function( event ) {
    var searchedValue = $('#search_term').val(); 
    var divHolder = $('#selectedStuff'); // the element we want to append our data to.
    divHolder.append(searchedValue + '<br>'); //adding the new stuff to it
});

请随意使用它。