title: JQuery AutoComplete Combobox
body: <p>I have been trying to get my head around autocomplete in a short time and am just banging my head against the wall trying to make it work.  I've tried numerous examples and none make sense enough for me to use.</p>
  
  <p>I have created an example that I hope explains what I am trying to do.  This is an MVC 3 application </p>
  
  <p>I am using the autocomplete code from the jquery site at <a href="http://jqueryui.com/autocomplete/#combobox" rel="nofollow">http://jqueryui.com/autocomplete/#combobox</a> and I have this linked into the header of my _Layout.cshtml file along with all other required js and css files.</p>
  
  <p>The Div which is in my view on Home/Index.cshtml and button with which to perform an action with.</p>
  
  <pre><code>&lt;div id="SearchDiv"&gt;&lt;/div&gt;
  &lt;button id="SearchBtn" type="button" style="float: right"&gt;Search&lt;/button&gt;
  </code></pre>
  
  <p>The view includes the js file where I create the SELECT element and also define the button click.</p>
  
  <pre><code>&lt;script src="@Url.Content("~/Scripts/combobox.js")" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The JS file contents are as follows.</p>
  
  <pre><code>        var theader = '&lt;table class="tbl"&gt;\n';
          var tbody = '';
  
  for (var i = 0; i &lt; 10; i++) {
      if (i % 2 == 0)
          tbody += '&lt;tr&gt;';
      tbody += '&lt;td&gt;&lt;select class="SelectionControls"/&gt;&lt;option value="0"&gt;&lt;/option&gt;';
      tbody += '&lt;option value="1"&gt;This is a test&lt;/option&gt;';
      tbody += '&lt;option value="2"&gt;This is a test 1&lt;/option&gt;';
      tbody += '&lt;option value="3"&gt;This is a test 2&lt;/option&gt;';
      tbody += '&lt;option value="4"&gt;This is a test 3&lt;/option&gt;';
      tbody += '&lt;option value="5"&gt;This is a test 4&lt;/option&gt;';
      tbody += '&lt;select&gt;&lt;/td&gt;';
  
      if (i % 2 != 0)
          tbody += '&lt;/tr&gt;\n';
  }
  var tfooter = '&lt;/table&gt;';
  document.getElementById('SearchDiv').innerHTML = theader + tbody + tfooter;
  
  $(".SelectionControls").combobox();
  
  $("#SearchBtn").click(function () {
      var readtheselectedvalue= $(".SelectionControls")[0].val();
  });
  </code></pre>
  
  <p>Nothing happens when I run the code apart from it putting comboboxes onto the screen in a table but they are all empty.  I need the comboboxes to be populated with the textural values above so the selected text is shown in the combobox textfield when an item is selected but when I read the val() I need it to return the value associated with that selection 0 - 5.  </p>
  
  <p>I need to be able to read the value 0-5 in javascript as I have further processing I need to do with the value once the Search button is pressed.</p>
  
  <p>If anyone could please tell me how I accomplish this I would be very grateful as I've been struggling with this for ages. </p>