Autocomplete question RSS

• • Reply
  

  BorrieRulez

  Member

  18 Points

  60 Posts

  Autocomplete question

  Apr 16, 2012 10:42 AM|LINK

  Hey Everyone,

  I would like to add autocomplete function to this html.textbox:

  <p>
          Seacrh by ProjectName: @Html.TextBox("searchStringByProjectName", ViewBag.CurrentFilter as string)
          <input type="submit" value="Search"/></p>

  The search in my controller does this (I followed a tutorial for sorting and stuff):

     public ViewResult Index(string sortOrder, string currentFilter, string searchStringByProjectName, int? page)
          {
  
              ViewBag.CurrentSort = sortOrder;
              ViewBag.DateSortParm = sortOrder == "Date" ? "Date desc" : "Date";
              var indexprojects = from s in db.T_Project
                             select s;
              if (Request.HttpMethod == "GET")
              {
                  searchStringByProjectName = currentFilter;
              }
              else
              {
                  page = 1;
              }
              ViewBag.CurrentFilter = searchStringByProjectName;
  
              
              if (!String.IsNullOrEmpty(searchStringByProjectName))
              {
                  indexprojects = indexprojects.Where(s => s.ProjectName.ToUpper().Contains(searchStringByProjectName.ToUpper()));
              }
  
              switch (sortOrder)
              {
                  case "Date":
                      indexprojects = indexprojects.OrderBy(s => s.ProjectDate);
                      break;
                  case "Date desc":
                      indexprojects = indexprojects.OrderByDescending(s => s.ProjectDate);
                      break;
                  default:
                      indexprojects = indexprojects.OrderBy(s => s.ProjectDate);
                      break;
              }
  
              int pageSize = 6;
              int pageNumber = (page ?? 1);
  
              return View(indexprojects.ToPagedList(pageNumber, pageSize));
  
              
             }

  
    So how can I add autocomplete function that get's all the projectnames from my database?

• • Reply
  

  CodeHobo

  All-Star

  18647 Points

  2647 Posts

  Re: Autocomplete question

  Apr 16, 2012 02:43 PM|LINK

  you can really use any autocomplete control that is clientside or a few mvc specific ones. Take a look at the following:
  http://jqueryui.com/demos/autocomplete/

  Telerik also have an mvc control (part of the combobox page) that was built to work with asp.net mvc. It is free as long as you are ok with using open source software.
  http://demos.telerik.com/aspnet-mvc/combobox 

  Hattan Shobokshi
  Blog | Twitter : @Hattan
  
• • Reply
  

  BorrieRulez

  Member

  18 Points

  60 Posts

  Re: Autocomplete question

  Apr 16, 2012 02:54 PM|LINK

  CodeHobo,

  Tx for your response, the jqueryui example uses

  <input id="tags">

  for the javascript tha'ts behind it. How can I give that id to my @html.textbox?

  also the script uses this:

  $(function() {
  		var availableTags = [
  			"ActionScript",
  			"AppleScript",
  			"Asp",
  			"BASIC",
  			"C",
  			"C++",
  			"Clojure",
  			"COBOL",
  			"ColdFusion",
  			"Erlang",
  			"Fortran",
  			"Groovy",
  			"Haskell",
  			"Java",
  			"JavaScript",
  			"Lisp",
  			"Perl",
  			"PHP",
  			"Python",
  			"Ruby",
  			"Scala",
  			"Scheme"
  		];

  How can I get a dynamic list from my model?
  
  

• • Reply
  

  Mohsen Esmai...

  Member

  6 Points

  3 Posts

  Re: Autocomplete question

  Apr 16, 2012 03:07 PM|LINK

  $("#searchStringByProjectName").autocomplete({
      source: availableTags
  });

  or you can rename your textbox:

  @Html.TextBox("tags", ViewBag.CurrentFilter as string)
  
  $("#tags").autocomplete({  
      source: availableTags
  });

  • Edited by mohsen esmailpour on Apr 16, 2012 03:14 PM
  • Edited by mohsen esmailpour on Apr 16, 2012 03:20 PM
• • Reply
  

  CodeHobo

  All-Star

  18647 Points

  2647 Posts

  Re: Autocomplete question

  Apr 16, 2012 03:28 PM|LINK

  To get the dynamic list from your model you can do two things. You can either have the model write the javascript array for you, so in your view you would write server side code @... that writes out javascript.

  Another option is to have the  autocomplete pull the data from an action method via ajax.
  http://jqueryui.com/demos/autocomplete/#remote

  Something like:

  //js
  $( "#birds" ).autocomplete({
  			source: "/Home/AutoComplete",
  			minLength: 2,
  			select: function( event, ui ) {
  				log( ui.item ?
  					"Selected: " + ui.item.value + " aka " + ui.item.id :
  					"Nothing selected, input was " + this.value );
  			}
  		});
  
  // Controller
  public ActionResult AutoComplete(string q){
    var data = //get from db where q = whatever
    return Json(data,JsonRequestBehavior.AllowGet);
  }

  
   

  Hattan Shobokshi
  Blog | Twitter : @Hattan
  
  • Marked as answer by BorrieRulez on Apr 18, 2012 03:18 PM
• • Reply
  

  BorrieRulez

  Member

  18 Points

  60 Posts

  Re: Autocomplete question

  Apr 16, 2012 04:22 PM|LINK

  I've added a script file to my scripts folder and call it from my _Layout file:

  $("#searchStringByProjectName").autocomplete({
      source: "/Projects/AutoComplete",
      minLength: 2
  });

  
   In my controller I've added:

        public ActionResult AutoComplete(string q){
            var data = db.T_Project.Select(i => i.ProjectName);
        return Json(data,JsonRequestBehavior.AllowGet); 
  }

  But nothing seems to happen, what am I missing?

• • Reply
  

  BorrieRulez

  Member

  18 Points

  60 Posts

  Re: Autocomplete question

  Apr 16, 2012 04:32 PM|LINK

  OMG I'm stupid :)

  I forgot the

  $(function () {

  om my javascript :)

  It works now, but how can I write some sort of html helper to just add a tag to a textbox (so that i don't have to create a separate controller
  function and javascript for every autocomplete box that I use?

• • Reply
  

  Young Yang -...

  All-Star

  21344 Points

  1818 Posts

  Microsoft

  Re: Autocomplete question

  Apr 18, 2012 05:59 AM|LINK

  Hi

  BorrieRulez

  but how can I write some sort of html helper to just add a tag to a textbox (so that i don't have to create a separate controller
  function and javascript for every autocomplete box that I use?

  Firstly, you should create an abstract base attribute that allow you using custom view model attribute. Then inherit from this attribute, you can create a custom auto complete attribute, use this attribute decorated the property in viewmodel, you can easy to achieve it with jQuery-ui.

  You can get more details from: http://weblogs.asp.net/seanmcalinden/archive/2010/06/12/asp-net-mvc-2-auto-complete-textbox-custom-view-model-attribute-amp-editortemplate.aspx

  Hope this helpful
  Regards
  Young Yang

  Please mark the replies as answers if they help or unmark if not.
  Feedback to us
  
  Develop and promote your apps in Windows Store
  
  
  • Marked as answer by BorrieRulez on Apr 18, 2012 03:18 PM
• • Reply
  

  BorrieRulez

  Member

  18 Points

  60 Posts

  Re: Autocomplete question

  Apr 18, 2012 03:19 PM|LINK

  Youn Yang,

  Tx for your reply, i'll try out your solution.