Question

我正在使用jQuery和bootstrap来提供下拉搜索建议。以下是html代码。但是当我在搜索表单中键入内容然后清除表单时。两个形式如图所示。为什么？我是jQuery的新手。谢谢你的帮助。

<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <form class="form-search">
                <input type="text" id="month" name="month" class="input-medium search-query">
                <button type="submit" class="btn">Search</button>
                <div id="suggestions">
                </div>
            </form>
        </div>
    </div>
</div>
<script>
jQuery("#month").keyup(function(){
      ajax('search', ['month'], 'suggestions')});
</script>

enter image description here

修改我正在使用web2py framwork。这是搜索功能的代码：

def search():
    if not request.vars.month: return dict()
    month_start = request.vars.month
    selected=complete('piracyfinder',month_start)  #this line get the search results
    return DIV(*[DIV(k['title'],
                     _onclick="jQuery('#month').val('%s')" % k['title'],
                     _onmouseover="this.style.backgroundColor='lightblue'",
                     _onmouseout="this.style.backgroundColor='white'"
                     ) for k in selected])

Answer 1

if not request.vars.month也适用于month var，但是为空。因此，它正在返回表格。

您需要执行以下操作之一：

将您的“建议”代码放在不同的页面/文件中
向请求添加isAJAX变量（或以其他方式识别AJAX请求）
检查变量是否存在，而不是检查它是否是假的。

Answer 2

您似乎正在使用相同的功能（即search()）来填写建议以及创建表单（尽管该功能在提交时不会处理表单）。根据逻辑，当request.vars.month为空或不存在时，该函数返回一个空字典。这将导致执行并返回关联的视图（即/ views / [controller name] /search.html）。推测search.html视图包含上面显示的HTML代码。因此，当您清除输入框时，会触发keyup处理程序并发送一个空月份变量，这会导致表单的新副本被发回并插入“suggestions”div中。您可以通过检查request.vars.month是否存在来避免此问题：

if not request.vars.month:
    return '' if 'month' in request.vars else dict()

更好的方法可能只是为搜索表单使用不同的函数，并给出他们做完全不同的事情并且不共享任何代码的建议。

为什么会出现两种形式？

2 个答案: