FAQ
Hello!

I'm trying to make a form with autocomplete text edit field; I do
understand general workflow but I still miss some simple-but-complete
example.

Can anyone please provide me with one? JQuery would be the best.

Alex

Search Discussions

  • Charlie Garrison at Jun 19, 2011 at 9:44 am
    Good evening,
    On 19/06/11 at 12:18 AM +0400, Alex Povolotsky wrote:

    I'm trying to make a form with autocomplete text edit field; I
    do understand general workflow but I still miss some
    simple-but-complete example.

    Can anyone please provide me with one? JQuery would be the best.
    Ripped and simplified from code I'm using. So can't say it's a
    complete example, but should have all the elements you need to
    make it work.

    <http://jqueryui.com/demos/autocomplete/>


    package MyApp::Controller::REST;
    use Moose;
    use namespace::autoclean;

    extends qw'Catalyst::Controller::REST';

    sub usernames :Chained('') :PathPart('usernames')
    :ActionClass('REST') { }
    sub usernames_GET : Local {
    my ( $self, $c ) = @_;
    my $query ||= $c->req->params->{query} || '';
    my $limit ||= $c->req->params->{limit} || 250;

    my $usernames = $c->model('DBIC::User')->search(
    { username => {'-like', "\%$query\%"} },
    { order_by => 'username',rows=>$limit }
    );
    my @usernames_list = map { {value => $_->id, label =>
    $_->username} } $usernames->all;

    $self->status_ok(
    $c,
    entity => \@usernames_list,
    );
    }

    __PACKAGE__->meta->make_immutable;
    1;


    ## edit.yml
    .......
    - type: Hidden
    name: user_id
    constraints:
    - SingleValue
    - Integer
    - type: Block
    nested_name: user
    elements:
    - type: Text
    name: username
    label: User
    model_config:
    read_only: 1

    ## edit.tt2
    .......
    $(document).ready(function(){
    $("#form_user\\.username").autocomplete({
    minLength: 2,
    source: function( request, response ) {
    $.getJSON( "[% c.uri_for_action('/rest/usernames')
    %]", {
    query: request.term
    }, response );
    },
    select: function( event, ui ) {
    $( "#form_user\\.username" ).val( ui.item.label );
    $( "#form_user_id" ).val( ui.item.value );
    return false;
    },
    });
    });



    Charlie

    --
    ? Charlie Garrison ? <garrison@zeta.org.au>

    O< ascii ribbon campaign - stop html mail - www.asciiribbon.org
    ? http://www.ietf.org/rfc/rfc1855.txt
  • Alex Povolotsky at Jun 19, 2011 at 8:22 pm

    On 06/19/11 13:44, Charlie Garrison wrote:
    Good evening,
    On 19/06/11 at 12:18 AM +0400, Alex Povolotsky wrote:

    I'm trying to make a form with autocomplete text edit field; I do
    understand general workflow but I still miss some simple-but-complete
    example.

    Can anyone please provide me with one? JQuery would be the best.
    Ripped and simplified from code I'm using. So can't say it's a
    complete example, but should have all the elements you need to make it
    work.
    Thanks, I'll look. For some weird reason copypasted example with JQuery
    did not work at all, while Prototype works OK.

    Alex.
  • Alex Povolotsky at Jul 1, 2011 at 5:02 pm

    On 06/19/11 13:44, Charlie Garrison wrote:
    Good evening,
    On 19/06/11 at 12:18 AM +0400, Alex Povolotsky wrote:

    I'm trying to make a form with autocomplete text edit field; I do
    understand general workflow but I still miss some simple-but-complete
    example.

    Can anyone please provide me with one? JQuery would be the best.
    Ripped and simplified from code I'm using. So can't say it's a
    complete example, but should have all the elements you need to make it
    work.
    Well... Nearly works, BUT.

    # In template
    $(document).ready(function(){
    $("#addblack").autocomplete('[%
    c.uri_for('/userinfo','complete_user', 'blacklist') %]');
    });

    # In controller
    sub complete_user : Local : Args(1) {
    my ($self, $c, $mode) = @_;
    my $name = $c->req->param('term');
    if ($name gt '') {
    my $names;
    if ($mode eq 'blacklist') {
    $c->log->info('Autocompleting blacklist '.$name);
    $names = $c->model('Db::Account')->search({ login => {
    ILIKE => $name.'%' } },
    { columns =>
    [qw/login/], limit => 10, order_by => [qw/login/]});
    $c->log->info($names->count().' found');
    $c->stash->{entity} = [ map { { label => $_->login } }
    $names->all() ];
    } else {
    die "Wrong mode $mode";
    }
    $c->stash->{term} = $name;
    }
    $c->forward('View::JSON');
    }

    It requests data; it receives data. Autocompletion does not work.


    In http://jqueryui.com/demos/autocomplete/, there is NOTHING at all (I
    really do hate them) about suggestions format expected by jQueryUI
    autocomplete.

    I've tried every combitation I've managed to invent, but no success.
    <http://jqueryui.com/demos/autocomplete/>


    package MyApp::Controller::REST;
    use Moose;
    use namespace::autoclean;

    extends qw'Catalyst::Controller::REST';

    sub usernames :Chained('') :PathPart('usernames') :ActionClass('REST')
    { }
    sub usernames_GET : Local {
    my ( $self, $c ) = @_;
    my $query ||= $c->req->params->{query} || '';
    my $limit ||= $c->req->params->{limit} || 250;

    my $usernames = $c->model('DBIC::User')->search(
    { username => {'-like', "\%$query\%"} },
    { order_by => 'username',rows=>$limit }
    );
    my @usernames_list = map { {value => $_->id, label =>
    $_->username} } $usernames->all;

    $self->status_ok(
    $c,
    entity => \@usernames_list,
    );
    }

    __PACKAGE__->meta->make_immutable;
    1;


    ## edit.yml
    ........
    - type: Hidden
    name: user_id
    constraints:
    - SingleValue
    - Integer
    - type: Block
    nested_name: user
    elements:
    - type: Text
    name: username
    label: User
    model_config:
    read_only: 1

    ## edit.tt2
    ........
    $(document).ready(function(){
    $("#form_user\\.username").autocomplete({
    minLength: 2,
    source: function( request, response ) {
    $.getJSON( "[% c.uri_for_action('/rest/usernames') %]", {
    query: request.term
    }, response );
    },
    select: function( event, ui ) {
    $( "#form_user\\.username" ).val( ui.item.label );
    $( "#form_user_id" ).val( ui.item.value );
    return false;
    },
    });
    });



    Charlie
  • Alan Humphrey at Jul 1, 2011 at 5:18 pm
    Firebug shows the following as the JSON content returned in their demo:

    [ { "id": "Nycticorax nycticorax", "label": "Black-crowned Night Heron",
    "value": "Black-crowned Night Heron" }, { "id": "Corvus cornix", "label":
    "Hooded Crow", "value": "Hooded Crow" }, { "id": "Corvus corone", "label":
    "Carrion Crow", "value": "Carrion Crow" }, { "id": "Corvus splendens",
    "label": "House Crow", "value": "House Crow" }, { "id": "Zonotrichia
    leucophrys", "label": "White-crowned Sparrow", "value": "White-crowned
    Sparrow" } ]

    -----Original Message-----
    From: Alex Povolotsky
    Sent: Friday, July 01, 2011 10:02 AM
    To: The elegant MVC web framework
    Subject: Re: [Catalyst] Complete example for autocomplete with HTML::FormFu,
    please
    On 06/19/11 13:44, Charlie Garrison wrote:
    Good evening,
    On 19/06/11 at 12:18 AM +0400, Alex Povolotsky wrote:

    I'm trying to make a form with autocomplete text edit field; I do
    understand general workflow but I still miss some simple-but-complete
    example.

    Can anyone please provide me with one? JQuery would be the best.
    Ripped and simplified from code I'm using. So can't say it's a
    complete example, but should have all the elements you need to make it
    work.
    Well... Nearly works, BUT.

    # In template
    $(document).ready(function(){
    $("#addblack").autocomplete('[%
    c.uri_for('/userinfo','complete_user', 'blacklist') %]');
    });

    # In controller
    sub complete_user : Local : Args(1) {
    my ($self, $c, $mode) = @_;
    my $name = $c->req->param('term');
    if ($name gt '') {
    my $names;
    if ($mode eq 'blacklist') {
    $c->log->info('Autocompleting blacklist '.$name);
    $names = $c->model('Db::Account')->search({ login => { ILIKE =>
    $name.'%' } },
    { columns =>
    [qw/login/], limit => 10, order_by => [qw/login/]});
    $c->log->info($names->count().' found');
    $c->stash->{entity} = [ map { { label => $_->login } }
    $names->all() ];
    } else {
    die "Wrong mode $mode";
    }
    $c->stash->{term} = $name;
    }
    $c->forward('View::JSON');
    }

    It requests data; it receives data. Autocompletion does not work.


    In http://jqueryui.com/demos/autocomplete/, there is NOTHING at all (I
    really do hate them) about suggestions format expected by jQueryUI
    autocomplete.

    I've tried every combitation I've managed to invent, but no success.
  • Alex Povolotsky at Jul 2, 2011 at 6:40 am

    On 07/01/11 21:18, Alan Humphrey wrote:
    Firebug shows the following as the JSON content returned in their demo:
    I've found http://www.devbridge.com/projects/autocomplete/jquery/ -
    works like a charm and well-documented.


    Alex
  • Róbert Oroszi at Jul 2, 2011 at 7:23 am
    I think you should call ac in jQuery like this:
    $( "#addblack" ).autocomplete({
    source: "[**% c.uri_for('/userinfo','**complete_user', 'blacklist') %]"
    });

    and the json should be formatted like this:
    [
    {
    label: "label"
    value: "value"
    }
    ..etc..
    ]

    In my opinion you should use jQueryUI because it's official (very efficient
    team working on it), unlike the simple jQuery plugins.

    2011/7/2 Alex Povolotsky <tarkhil@over.ru>
    On 07/01/11 21:18, Alan Humphrey wrote:

    Firebug shows the following as the JSON content returned in their demo:


    I've found http://www.devbridge.com/**projects/autocomplete/jquery/<http://www.devbridge.com/projects/autocomplete/jquery/>- works like a charm and well-documented.

    Alex


    ______________________________**_________________
    List: Catalyst@lists.scsys.co.uk<https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=Catalyst@lists.scsys.co.uk>
    Listinfo: http://lists.scsys.co.uk/cgi-**bin/mailman/listinfo/catalyst<http://lists.scsys.co.uk/cgi-bin/mailman/listinfo/catalyst>
    Searchable archive: http://www.mail-archive.com/**
    catalyst@lists.scsys.co.uk/<http://www.mail-archive.com/catalyst@lists.scsys.co.uk/>
    Dev site: http://dev.catalyst.perl.org/
    -------------- next part --------------
    An HTML attachment was scrubbed...
    URL: http://lists.scsys.co.uk/pipermail/catalyst/attachments/20110702/9617caca/attachment.htm
  • Alex Povolotsky at Jul 2, 2011 at 11:06 am

    On 07/02/11 11:23, Oroszi, Ro'bert wrote:
    In my opinion you should use jQueryUI because it's official (very
    efficient team working on it), unlike the simple jQuery plugins.
    Sounds reasonable; however, plugin works, jQueryUI not, and I'll try to
    make it work if time permits. Thanks.

    Alex
    -------------- next part --------------
    An HTML attachment was scrubbed...
    URL: http://lists.scsys.co.uk/pipermail/catalyst/attachments/20110702/d67feb3a/attachment.htm

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupcatalyst @
categoriescatalyst, perl
postedJun 18, '11 at 8:18p
activeJul 2, '11 at 11:06a
posts8
users4
websitecatalystframework.org
irc#catalyst

People

Translate

site design / logo © 2021 Grokbase