title: Get the Values of Option attribute in datalist in HTML5 that is dynamically generated from AJAX Calls
body: <p>I ran into a problem where I was populating the datalist using AJAX(JSON). I want to be able to select the option from the datalist and click on the FIND TIMESHEETS button and do some more ajax calls based on that seleted project Id. My code looks like the following.</p>
  
  <p>MY HTML</p>
  
  <pre><code> &lt;div id="datalist" class="hide"&gt;
          &lt;label id="labelPl" for="projectList"&gt;Select your project from the list: &lt;/label&gt;
          &lt;input type="text" id="ProjName" list="projectList" placeholder=" Project Search by Client's Name : e.g. google, microsoft,caresource etc."&gt;
          &lt;datalist id="projectList"&gt;&lt;/datalist&gt;
          &lt;button id="find-ts" class="btn btn-primary"&gt;Find Timesheets&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>MY AJAX THAT SUCESSFULLY POPULATES THE PROJECT LISTS</p>
  
  <pre><code> $('#ProjName').on('input', function (e) {
                  var val = $(this).val();
              if (val === "") return;
              var query = $('#ProjName').val();
              var uId=@Model.Id;
              $.getJSON("/Search/Projects", { userId: uId, query: query }, function (data, xhr) {
                  var dataList = $('#projectList');
                  dataList.empty();
                  $.each(data, function (i, item) {
                      var sdate = new Date(parseInt(item.StartDate.substr(6)));
                      formatStartDate = (sdate.getMonth() + 1) + '/' + sdate.getDate() + '/' + sdate.getFullYear();
                      var fromatEndDate;
                      if (item.EndDate == null) {
                          fromatEndDate = "Present";
                      }
                      else {
  
                          fromatEndDate = item.EndDate;
                      }
                      var opt = $("&lt;option class='selected-project' style='min-height:4em'&gt;&lt;/option&gt;").attr({
                          "value":item.Name + " (from " + formatStartDate + " to " + fromatEndDate + ")",
                          "data-id":item.Id
                      });
                      var select=$('&lt;select id="selectList"&gt;&lt;/select&gt;')
                      dataList.append(select.append(opt));
                  });
              });
  </code></pre>
  
  <p>MY ONCLICK EVENT LISTENER FOR THE BUTTON</p>
  
  <pre><code>  $('#find-ts').click(function () {
              //get the id of the selected from datalist
              var val = $('#ProjName').val()
              var selectedId=$('#selectList option:selected').attr('data-id');
              var projId = selectedId ? selectedId : 0; //set it to zero if not found
              //
              console.log("the projectId is ", projId); //This is where I need my projectId so that I can pass in into the controller action method.
              $.ajax({
                  url: 'url?projId=' + projId,
                  type: 'GET',
                  beforeSend: function before() {
                      loadingBar(true);
                  },
                  complete: function complete() {
                      var myVar = setInterval(function () { loadingBar(false); }, 5000);
                  },
                  success: function (result) {}
                  //doing some calculation here
              });
  
          }); 
  </code></pre>