jQuery / AJAX追加搜索结果 - 如何只清除一个结果？

I'm running into a problem that I can't seem to solve. The code works great, but I need one more feature.

我遇到了一个我似乎无法解决的问题。代码效果很好，但我还需要一个功能。

I'm using jQuery to return search results one at a time (multiple searches without reloading the page). But, I need the user to be able to close out of the search results they don't want without leaving the page and losing the other results.

我正在使用jQuery一次返回一个搜索结果（多次搜索而不重新加载页面）。但是，我需要用户能够在不离开页面的情况下关闭他们不想要的搜索结果并丢失其他结果。

The code consists of

代码由

isbn.tpl: input isbn number for search
isbn.tpl：输入搜索的isbn数字
ajax.php: gets results, returns results to:
ajax.php：获取结果，返回结果：
ajax.tpl: displays results inside of isbn.tpl
ajax.tpl：显示isbn.tpl中的结果

I'm pretty sure this code will need to be inside of ajax.tpl. I need every row to have an "X" that will close that individual search result. The rest of the results stay. So, ajax.php generates a random string that starts with "isbn_", I use that tring in ajax.tpl in a situation. Then, the code could close anything with that unique id.

我很确定这段代码需要在ajax.tpl中。我需要每一行都有一个“X”来关闭单个搜索结果。其余的结果仍然存在。所以，ajax.php生成一个以“isbn_”开头的随机字符串，我在一种情况下使用了ajax.tpl。然后，代码可以使用该唯一ID关闭任何内容。

But, I don't know if that's the best way to do this, and I don't know how to do this.

但是，我不知道这是否是最好的方法，我不知道如何做到这一点。

isbn.tpl:

isbn.tpl：

<script src="http://code.jquery.com/jquery-1.5.js"></script>
<form method="post" action="ajax.php" name="searchISBN" id="searchForm"> 
    <input type="text" name="isbn" placeholder="Search..." />
    <input class="myaccount" id="doSearch" name="doSearch" type="submit" value="Search" />
</form>

<form name="buyback" method="post" action="buy.php">
        <table id="result" class="search">
            <tr><td>
                <strong>Title</strong>
            </td><td>
                <strong>Author</strong>
            </td><td>
                <strong>ISBN</strong>
            </td><td>
                <strong>Price</strong>
            </td><td>
                <strong>Wholesale</strong>
            </td>
            </tr>
        </table>

        <br><br>

        <input name="doCalc" type="submit" value="Calculate">
        &nbsp;
        <input name="doCancel" type="submit" value="Cancel">

</form>

{literal}
<script>
// attach a submit handler to the form
$("#searchForm").submit(function(event) {
// stop form from submitting normally
event.preventDefault(); 

// get some values from elements on the page:
var $form = $( this ),
$term_input = $form.find('input[name="isbn"]'),
term = $term_input.val(),
//term = "isbn",
url = $form.attr( 'action' );
    $.post( url, { doSearch: "Search", isbn: term } ,
        function( data ) {
            var content = $( data );

          $( "#result" ).append( content );
      }
    );
    $term_input.val('');
});

</script>
{/literal}

ajax.php (truncated):

ajax.php（截断）：

/**
* Create random string for id="$string" in ajax
* This way, ajax can remove individual search results
* without reloading the page.
**/
$n = rand(10e16, 10e20);
$string = base_convert($n, 10, 36);
$string = "isbn_" . $string;


$smarty->assign('doSearch', $doSearch);
$smarty->assign('details', $details);
$smarty->assign('price', $price);
$smarty->assign('wholesale', $wholesale);
$smarty->assign('userWhole', $userWhole);
$smarty->assign('userPrice', $userPrice);
$smarty->assign('isbn', $isbn);
$smarty->assign('page', $page);
$smarty->assign('rate', $rate);
$smarty->assign('wrate', $wrate);
$smarty->assign('title', $title);
$smarty->assign('author', $author);
$smarty->assign('msg', $msg);
$smarty->assign('string', $string);
$smarty->display('ajax.tpl');

ajax.tpl:

ajax.tpl：

{if $doSearch == "Search"}
        {if $price != NULL}
            <tr class="{$string}"><td>
                {$title}
            </td><td>
                {$author}
            </td><td>
                {$isbn}
            </td><td>
                <input type="text" name="{$isbn}" size="3" value="{$userPrice}"><br>
            </td><td>
                {$userWhole}
            </td></tr>
        {/if}
{/if}

Thank you for any and all help!!

感谢您的帮助！

2 个解决方案

#1

Using CSS class names (and/or IDs) is a good way to go to identify data easily.

使用CSS类名（和/或ID）是一种轻松识别数据的好方法。

You can then use jQuery to hide the items you don't want in the results.

然后，您可以使用jQuery隐藏结果中不需要的项目。

If you had a class of "isbn_xxxxxx" on an element, such as a TR, you can the remove it: $("isbn_xxxxxx").remove(), or hide it: $("isbn_xxxxxx").hide().

如果你有一个元素的“isbn_xxxxxx”类，比如TR，你可以删除它：$（“isbn_xxxxxx”）。remove（）或隐藏它：$（“isbn_xxxxxx”）。hide（）。

There are a number of ways to hook up the event, but you can easily place it inline as the onclick event.

有许多方法可以连接事件，但您可以轻松地将其作为onclick事件进行内联。

The beauty is that using class names allows you to group things as well. You can have multiple classes for different purposes and jQuery makes it easy to manipulate the whole thing with little code.

美妙之处在于使用类名允许您对事物进行分组。你可以有多个类用于不同的目的，jQuery可以很容易地用很少的代码来操作整个事物。

EDIT:

编辑：

<a href="javascript://" onclick="$('.{$string}').remove()">X</a>

#2

Try adding in ajax.tpl:

尝试添加ajax.tpl：

<td><a href="javascript:" class="close_search">Close Search</a></td>

Then for the jQuery:

那么对于jQuery：

$('#result').delegate('.close_search', 'click', function() {
  $(this).closest('tr').hide();
});

#1