jQuery的自动完成与远程JSON源+谷歌应用程序引擎+的Python [英] 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()

用户只需创建一个使用这种形式的业余爱好实体：​​

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的多选远程自动完成构件（ http://jqueryui.com /自动/＃多个远程）：

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>

远程上面code指定在该行 $的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
这个文件应该返回自动完成工具，可以用它来构建的建议爱好列表爱好列表。它被赋予一个参数词包含哪些用户目前为止所输入。用它来限制返回的列表。 F.ex.如果词是巴，返回与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".

这篇关于jQuery的自动完成与远程JSON源+谷歌应用程序引擎+的Python的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！