带有远程 JSON 源 + Google App Engine + Python 的 jQuery 自动完成 [英] jQuery Autocomplete with Remote JSON Source + Google App Engine + Python

问题描述

假设我有一个 web 应用程序，它可以让用户保存他们的爱好.所以我有这样的:

So let's say I have a webapp which just lets users save their hobbies. So I have Kind like this:

class Hobby(ndb.Model):
    hobby_name = ndb.StringProperty()

用户只需使用此表单创建 Hobby 实体:

Users just create Hobby entities using this form:

<form action="/new-hobby" method="post">
    <input type="text" name="hobby_name" id="new-hobby" />
    <input type="submit" value="Save New Hobby" />
</form>

然后这个表单是这样处理的:

Then this form is handled by this:

# Handles /new-hobby
class NewHobby(webapp2.RequestHandler):

    def post(self):
        hobby_name = self.request.get('hobby_name')
        if hobby_name:
            h = Hobby(hobby_name = hobby)
            h.put()

app = webapp2.WSGIApplication([
    ('/new-hobby/?', NewHobby)
], debug=True)

这是标准的东西.通过此设置，可以看到用户以多种方式进入相同的爱好(例如:篮球"可以输入篮球").这是通过增加所有用户的统一"输入来实现自动完成功能的地方.

This is standard stuff. With this set up, users can be seen entering the same hobby in many ways (example: "basketball" can be entered "basket ball"). This is where an autocomplete functionality would be useful by increasing 'uniformed' input by all users.

所以我决定使用 Jquery 的 Multiselect Remote Autocomplete Widget (http://jqueryui.com/autocomplete/#multiple-remote):

So I've decided to use the Jquery's Multiselect Remote Autocomplete Widget (http://jqueryui.com/autocomplete/#multiple-remote):

 <script>
  $(function() {
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

    $( "#birds" )
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).autocomplete( "instance" ).menu.active ) {
          event.preventDefault();
        }
      })
      .autocomplete({
        source: function( request, response ) {
          $.getJSON( "search.php", {
            term: extractLast( request.term )
          }, response );
        },
        search: function() {
          var term = extractLast( this.value );
          if ( term.length < 2 ) {
            return false;
          }
        },
        focus: function() {
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          terms.push( "" );
          this.value = terms.join( ", " );
          return false;
        }
      });
  });
  </script>

远程源代码在$.getJSON("search.php",...);行中指定.

The remote source is specified above code in the line $.getJSON( "search.php",...);.

所以假设我在正确的轨道上，问题是:我应该用什么文件替换 search.php，那个文件里面应该有什么?

So assuming that I am on the right track, the question is: what file do I replace search.php with, and what should be inside that file?

推荐答案

search.php 需要替换为类似 suggetsHobbies.php 的东西该文件应返回一个爱好列表，自动完成工具可以使用这些爱好来构建建议的爱好列表.它被赋予一个参数 term ，其中包含用户迄今为止输入的内容.使用它来限制返回的列表.例如如果 term 是ba"，则返回以ba"开头的爱好列表.

search.php needs to be replaced with something like suggetsHobbies.php That file should return a list of hobbies that the auto-completion tool can use to build the list of hobbies that are suggested. It is given a parameter term that contains what the user has typed so far. Use that to restrict the list returned. F.ex. if term is "ba", return a list of hobbies beginning with "ba".

这篇关于带有远程 JSON 源 + Google App Engine + Python 的 jQuery 自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！