Textext sample

gistfile1.js

$('#cities')
            .textext({
                plugins : 'autocomplete tags ajax prompt',
                prompt : 'Enter a city or town',
                ajax : {
                    url : DrumBeatGlobals.get_cities_url,
                    data : {country : 'US' },
                    dataType : 'json',
                    loading : { message : 'Loading...'}
                },

                //tagsItems : [{ city_id :"220594107",country_key :"US",country_name:"United States",name:"New York",region_key:"NY",region_name:"New York"}],
                
                autocomplete : {
                  dropdownMaxHeight : '300px',
                  render : function ( city ){
                    //console.log(city);
                      // `this` refers to the instance of `TextExtAutocomplete`
                      var t = city.name, l = "";
                      if( city.region_key ){
                        t = t + ", " + city.region_key;
                        l = city.region_key;
                      }else if( city.country_key ){
                        t = t + ", " + city.country_key;
                      }
                      
                      if( l.length > 0 && city.country_name ){
                        l = l + ", " + city.country_name;
                      }else if( city.country_name ){
                        l = city.country_name;
                      }
                      //Due to click is not working on custom elements
                      //return "<div>" + t + "<br/><small>" + l + "</small>" + "</div>";
                      return t + "<br/><small>" + l + "</small>";
                  }
                },
                
                ext: {
                        itemManager : {
                            stringToItem : function ( itemStr ) {
                              
                              var getCity = function( cityLabel ){
                                var city = null;
                                $( '.text-list .text-suggestion' ).each( function () {
                                  
                                  if( city ){
                                    return city;
                                  }
                                  
                                  var c = $( this ).data( 'text-suggestion' );
                                  if( c.tagText && c.tagText === cityLabel ) {
                                    city = c;
                                  }else{
                                    var s = c.name;
                                    if( c.region_key ){
                                      s = s + ", " + c.region_key;
                                    }else if( c.country_key ){
                                      s = s + ", " + c.country_key;
                                    }
                                    c.tagText = s;
                                    if( c.tagText && c.tagText === cityLabel ) {
                                      city = c;
                                    }
                                  }
                                });
                                return city;
                              }
                              return getCity( itemStr );
                            },
            
                            itemToString : function ( city ) {
                              var s = city.name;
                              if( city.region_key ){
                                s = s + ", " + city.region_key;
                              }else if( city.country_key ){
                                s = s + ", " + city.country_key;
                              }
                              city.tagText = s;
                              return s;
                            },
            
                            compareItems : function ( city1, city2 ) {
                                return city1 && city1.city_id && city2 && city2.city_id && ( city1.city_id == city2.city_id );
                            }
                        }
                    }
                
            });

Hi Amitesh,

Thanks for the code above... I have a question ...I am using the Textext plugin and one of my requirements is to display the username along with their profile pic in the dropdown box that is rendered from autocomplete. I am able to do that but when I select an option from the dropdown, instead of displaying the firstname and lastname in the input textbox, it displays [object, Object]. The information that is returned in the JSON format from our web service call is in name, value pair ..for example here is the code which returns the information to populate the dropdown:

public JsonResult AutoCompleteTest1(string q)
{
Workflow c = new Workflow();

        if (q != "")
        {
            c.SearchPeople(q);
            if (c != null)
            {
                  var peoplelist = c.ApproversList.Select(y => new { photourl = y.photo, id=y.HRID, firstname = y.FirstName, lastname=y.LastName }).ToList();
                return Json(peoplelist, JsonRequestBehavior.AllowGet);
            }

        }

    }

Once I select an option from the dropdown, I need to be able to just display the first and last name, but I am having trouble doing that. Please see my client code below:

<script type="text/javascript"> (function ($) { $(document).ready(function () { $('#textarea').textext({ plugins: 'tags autocomplete ajax filter', prompt: 'Add Names...', ajax: { url: '@Url.Action("AutoCompleteTest1")', dataType: 'json', type: 'POST', cacheResults: false }, autocomplete: { enabled: true, dropdown: { position: 'below', maxHeight: '200px', maxWidth: '600px' }, render: function (peoplelist) { var photo = ""; if (peoplelist.photourl == "") { photo = "../Images/NoUserImage.jpg"; } else { photo = peoplelist.photourl; } var format = peoplelist.firstname + " " + peoplelist.lastname + '
' + peoplelist.id; return '

' + " " + format + '


'; }, select: function (event, ui) { alert("select"); // prevent autocomplete from updating the textbox event.preventDefault(); // manually update the textbox and hidden field $(this).val(ui.item.label); $("#textarea").val(ui.item.firstname); }, ext: { itemManager: { itemToString: function (peoplelist) { var fullname = peoplelist.firstname + " " + peoplelist.lastname; alert(fullname); return fullname; } } } } }); var textarea = $('textarea:last'), output = $('pre:last'); var term; textarea.bind('setFormData', function (e, peoplelist, isEmpty) { var textext = $(e.target).textext()[0]; output.text(textext.hiddenInput().val()); }); }); })(jQuery); </script> <style> .wide { width:500px; } </style>

@using (@Html.BeginForm())
{

<textarea id="textarea" class="wide"></textarea>

}

Is there any way to do that? Thanks in advance