带有远程 JSON 源 + Google App Engine + Python 的 jQuery 自动完成

编程入门行业动态更新时间:2024-10-19 12:47:48

本文介绍了带有远程 JSON 源 + Google App Engine + Python 的 jQuery 自动完成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

假设我有一个 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/autocomplete/#multiple-remote):

So I've decided to use the Jquery's Multiselect Remote Autocomplete Widget (http://jqueryui/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?