logo
down
shadow

Typeahead - Unable to use dynamically created array as source of data


Typeahead - Unable to use dynamically created array as source of data

By : Otto Leading
Date : November 22 2020, 02:42 PM
I think the issue was by ths following , The problem is here is that you are loosing access to citiesObjArr outside of your success callback. To get around this, you can defer your response object:
Inside your change handler, you can do the following:
code :
$.when(createArrayOfCities())
  .then(function(data) {
      // Pass in the response and selected country to a new function
      handleResponse(data, selectedCountry);
   });
function createArrayOfCities() {
  return $.ajax({
      url: "https://api.myjson.com/bins/22mnl",
      dataType: "json",
      success: function (response) {
          return response;
      }
  });
}
function handleResponse(response, key) {

  if (response.hasOwnProperty(key)) {
    var j = 0;
    var i = 0;
    response[key].forEach(function (i) {
       citiesArray[j] = i;
       ////CREATION OF THE CITIES OBJECTS ARRAY
       citiesObjArr.push({
          val: i
       });
       j++;
    });
  };

  var titles = new Bloodhound({
    datumTokenizer: function (data) {
        return Bloodhound.tokenizers.whitespace(data.val);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: citiesObjArr
  });

  titles.initialize();
  $("#search").typeahead({
    highlight: true
  }, {
    name: 'titles',
    displayKey: 'val',
    source: titles.ttAdapter()
  });

}


Share : facebook icon twitter icon
ASP.Net: drop down list and data source created dynamically

ASP.Net: drop down list and data source created dynamically


By : John123
Date : March 29 2020, 07:55 AM
wish help you to fix your issue You can always create your controls dynamically. In this case though, if all your drop down lists are different, I'm not sure it's saving you anything, since you'll still have to assign them individual ID's and datasources.
Here's what the code might look like:
code :
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindDropDownLists();
    }
}

protected void Page_Init(object sender, EventArgs e)
{ 

        SqlDataSource sqlDS = new SqlDataSource();
        sqlDS.ConnectionString = ConfigurationManager.ConnectionStrings[0].ToString();
        sqlDS.SelectCommand = "select GenderID,Gender from mylookupGender";
        form1.Controls.Add(sqlDS);

        DropDownList ddl = new DropDownList();
        ddl.ID = "dddlGender";
        ddl.DataSource = sqlDS;
        ddl.DataTextField = "Gender";
        ddl.DataValueField = "GenderID";
        form1.Controls.Add(ddl);

        // ... Repeat above code 9 times or put in a for loop if they're all the same...
}

private void BindDropDownLists()
{
    foreach (Control ctl in form1.Controls)
    {
        if (ctl is DropDownList)
        {
            (ctl as DropDownList).DataBind();
        }
    }
}
Bootstrap js plugin source code how $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', fun

Bootstrap js plugin source code how $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', fun


By : Mini Shaji
Date : March 29 2020, 07:55 AM
To fix the issue you can do The first argument of the on() method is the event, in this case it is namespaced - the event is focus in the typeahead.data-api namespace
The second argument is a filter-selector for event-delegation purposes. The actual event handler is attached to the body element, but the handler function is only executed for events coming from elements with the data-provide attribute with a value of typeahead
Twitter bootstrap typeahead unable to add to dynamically created element

Twitter bootstrap typeahead unable to add to dynamically created element


By : Scott Miller
Date : March 29 2020, 07:55 AM
it helps some times I downloaded jquery.livequery.js to get the behavior I wanted:
code :
$("#job_title").livequery("create", function() {
    $(this).typeahead({
        source: searchFunction,        
        onselect: function(obj) {            
        }
    });
});
Typeahead with input created dynamically

Typeahead with input created dynamically


By : Sergey Polishchuk
Date : March 29 2020, 07:55 AM
I wish this helpful for you You are adding the new input to the DOM dynamically, so the TypeaheadJS library doesn't know the element exists to initialize it.
In your click event handler for addbtn, you will need to explicitly initialize the new control. I would also pull out the options hash for the typeahead into a separate variable that can be reused (assuming you want to reuse most of the settings).
code :
var taOptsHash = {
    minLength: 1
}, {
    name: 'flux',
    displayKey: 'nom',
    source: flux.ttAdapter(),
    templates: {
        empty: [
          'no type ahead',
          '@lang('events.no_typeahead')',
          '<span class="empty-message-details">',
          'no type ahead',
          '</span>',
          '</div>'
        ].join('\n'),
        suggestion: function (datum) {
            var nom = datum.nom;
            return nom;
        }
    }
};
function initTypeAhead(optsHash) {
    $('.typeaheadFluxClient').typeahead(optsHash);
}
$( "#addbtn" ).on( "click", function() {
    var count = $( ".associateFluxCLient" ).length;
    var newEl = '<hr>';
        newEl += '<div class="form-group">';
        newEl += '<label for="object" class="col-sm-2 control-label">Nom</label>';
        newEl += '<div class="col-sm-10">'
        newEl += '<input id="fluxClientPageTitle[` + count + `]" name="fluxClientPageTitle[` + count + `]" class="form-control typeahead typeaheadFluxClient" type="text" >';  
        newEl += '</div>';
        newEl += '</div>';
    $("#container").append(newEl);
    initTypeAhead(taOptsHash);
});
In Typeahead, unable to subscribe to service to get data to bind to typeahead search

In Typeahead, unable to subscribe to service to get data to bind to typeahead search


By : user2430374
Date : March 29 2020, 07:55 AM
Related Posts Related Posts :
  • Check each paragraph contains any bold element with jQuery
  • Bootstrap- background image with content overlay
  • Owl carousel not getting responsive
  • Working with css before selector
  • How to make flowcover like image slider(jquery editing)
  • how to make ajax call onclick of checkbox
  • When fetching data from multiple JSON files with different number of data columns it returns undefined and breaks loop,
  • Send multiple value on manually triggered event jQuery
  • Creating an image element (modifying the DOM)
  • Not able to display properly the hyperlinks because style=display:none
  • jQuery $('img[alt]') vs. $('img').attr('alt')?
  • How do I make a Modal Dialog Box Auto Open after 2 seconds?
  • Adding only one title at a time to the table header in jquery
  • Matched set results relative to another selector
  • How to increase jqgrid header checkbox size
  • Compile directive within controller and return html to DataTable's render function
  • how to change each consecutive div order?
  • Replace submit button value with ASCII character
  • Make mmenu expand to the current url
  • Uncaught TypeError: "#submitRates".click is not a functio
  • ACF Tag It Field and createTag
  • Original filename in case of error in jQuery File Upload
  • Cycle through an HTML list with jinja and jQuery?
  • jQuery Ajax triggering 2 events together from single click
  • jQuery UI draggable and sortable not working
  • jquery access dynamically generated form
  • Toggle other specific classes off when toggling one on
  • Changing aria-label for ascending and descending states on a sortable table with Jquery
  • Sending var with load jquery
  • How to wrap all siblings in one class after a class? (jQuery)
  • Appending an object to serialized form data
  • how to replace jquery to jquery mobile
  • jquery show/hide buttons on same row not showing pretty - causing half hight during animation?
  • <select> change event doesn't work
  • jQuery hover/click on desktop and mobile devices
  • Use Jquery and FormData to submit form fields and uploaded File to Spring MVC Controller in Spring Boot App
  • Is there a smart way to simplify these jquery codes?
  • JQuery File Upload middleware - Image versions not creating
  • How to increase cookies storage limit(4096) in chrome
  • div on translating increases page width
  • How do I set shipping value depending on select & checkbox
  • jQuery change active state of multiple elements on page when different categories are selected
  • rails jquery script does not work when clicking link
  • Array of JQuery Selectors
  • how can I target with jquery this element?
  • Display default date based on time in jquery datepicker
  • Changing date format before binding JSON data to a jquery template
  • How to use load and open in same div
  • How to make position fixed div scroll horizontally?
  • save state the list on page refresh
  • Change the value of many Divs on select of drop-down
  • Background-image transition not working
  • http request inside another http request success response not working in jquery
  • jQuery hover is not working when I use display:none property of my input
  • Limit jQuery toggle to only affect one accordion
  • Changing div values when dropdown is selected
  • How to replace a list of images with jQuery?
  • jQuery Clone / Copy Style attributes of first td of Table to another Tables's first td
  • Why my select only get the last value?
  • fullpage.js multiple onLeave and afterLoad events
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co