搜索输入文本

Question

我在搜索栏中使用 tokenfield，有一个小问题，假设我搜索：searchtag1、searchtag2 及之后我单击搜索并在搜索输入中加载我的搜索结果页面没有 searchtag1、searchtag2

我希望我搜索的标签也留在搜索页面的输入框中，如何实现？

我正在使用默认 bootstrap 表单

<div class="search">
    <form class="form-inline" role="form" action="{{ url('sonata_search') }}" method="GET">
        <div class="form-group">
            <input id="tags" class="form-control tokenfield" name="search" value="tag, tag2" placeholder="Search" type="text"  />
            <button type="submit" id="sonata_search_submit" class="btnbtn-default">
                <i class="fa fa-search"></i>
            </button>
        </div>
    </form>
</div>

Answer 1

您可以使用 sessionStorage 或 localStorage、cookie，或者您可以使用 AJAX 提交表单，并在 ajax 成功时仅在输入字段中显示提交的标签，而无需用于页面重新加载。

这里是 sessionStorage 的例子：

$(function() {
    // on form submit set tags in sessionStorage
    $('form').on('submit', function() {
        var tagsValue = $('#tags').val();
        sessionStorage.setItem('tags', tagsValue);
    });
    // if tags exist in sessionStorage set them as value in input field
    var tagsSession = sessionStorage.getItem('tags');
    if (tagsSession != null){
        $('#tags').val(tagsSession);
    }
    $('#tags').tokenfield();
});

Answer 2

HTTP 协议，因此 Web 服务器是 stateless。 Cookie 和会话变量是解决该问题并实现跨页面状态的最简单方法。

但还有更好的方法。看起来您正在使用 laravel 和 blade，但这种方法对于任何 Web 服务器通常都以相同的方式工作/图书馆。

您需要做的是send the tags到搜索"results"页面。在模板中，您需要想出一些方法来使用从服务器返回的数据重新创建标签。

搜索输入文本

Search input text

javascript

jquery

token

twitter-bootstrap