1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    176
    Vote Rating
    2
    Answers
    4
    renganathan is on a distinguished road

      0  

    Default Unanswered: How to implement auto suggestions for textbox in extjs 4?

    Unanswered: How to implement auto suggestions for textbox in extjs 4?


    Hi All,

    I want to implement auto suggestion feature in textbox. Is there any plugin or extensions are available in extjs 4?

    If somebody has implemented, please share the code.
    Thanks,

    RENGANATHAN M G

  2. #2
    Sencha - Training Team RWaters's Avatar
    Join Date
    Mar 2007
    Location
    Los Angeles, CA
    Posts
    714
    Vote Rating
    0
    Answers
    9
    RWaters is on a distinguished road

      0  

    Default


    Auto-suggest style functionality is actually available through the ComboBox class. You can turn the trigger off if you want to make it look more like a combobox.

    The forum search example shows this functionality mixed with a custom template for the display though a more traditional google suggest look and feel will be the default if you just set it up with a remote data store and turn off the trigger.

    http://docs.sencha.com/ext-js/4-1/#!...um-search.html

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    176
    Vote Rating
    2
    Answers
    4
    renganathan is on a distinguished road

      0  

    Default How to implement auto suggestions for textbox in extjs 4?:

    How to implement auto suggestions for textbox in extjs 4?:


    Hi ,

    Thanks for your reply.

    I just gone through the code. i dont know how its work ? i couldn't see any ajax calls in the firebug.

    can you help me to customize the code for my module?






    http://docs.sencha.com/ext-js/4-1/#!/example/form/forum-search.html


    Code:
    Ext.require([     'Ext.data.*',     'Ext.form.*' ]);  Ext.onReady(function(){      Ext.define("Post", {         extend: 'Ext.data.Model',         proxy: {             type: 'jsonp',             url : 'http://www.sencha.com/forum/topics-remote.php',             reader: {                 type: 'json',                 root: 'topics',                 totalProperty: 'totalCount'             }         },          fields: [             {name: 'id', mapping: 'post_id'},             {name: 'title', mapping: 'topic_title'},             {name: 'topicId', mapping: 'topic_id'},             {name: 'author', mapping: 'author'},             {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},             {name: 'excerpt', mapping: 'post_text'}         ]     });      ds = Ext.create('Ext.data.Store', {         pageSize: 10,         model: 'Post'     });      panel = Ext.create('Ext.panel.Panel', {         renderTo: Ext.getBody(),         title: 'Search the Ext Forums',         width: 600,         bodyPadding: 10,         layout: 'anchor',          items: [{             xtype: 'combo',             store: ds,             displayField: 'title',             typeAhead: false,             hideLabel: true,             hideTrigger:true,             anchor: '100%',              listConfig: {                 loadingText: 'Searching...',                 emptyText: 'No matching posts found.',                  // Custom rendering template for each item                 getInnerTpl: function() {                     return '<a class="search-item" href="http://www.sencha.com/forum/showthread.php?t={topicId}&p={id}">' +                         '<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +                         '{excerpt}' +                     '</a>';                 }             },             pageSize: 10         }, {             xtype: 'component',             style: 'margin-top:10px',             html: 'Live search requires a minimum of 4 characters.'         }]     }); });
    Thanks,

    RENGANATHAN M G

Thread Participants: 1

Tags for this Thread