X

Geertjan's Blog

  • June 5, 2015

HTML5 DataList with Knockout.js

Geertjan Wielenga
Product Manager

Let's populate an HTML5 DataList with countries via Knockout.js. The result will be as shown below, that is, you will have code completion via your DataList...

...and, when a country is selected, and focus moves out of the DataList (e.g., use the Tab key), its states will be displayed in an unordered list below:

The completed sample code is here:

https://github.com/GeertjanWielenga/Countries

The starting point is to populate an observable array with your countries and states. I found some JavaScript code on-line that did what I needed and you can see that integrated into my sample here:

https://github.com/GeertjanWielenga/Countries/blob/master/public_html/app.js

Now that we have countries and states, let's create a DataList and populate it and, when a country is selected, list its states:

Line 26 above was definitely the trickiest to figure out, where this provided the missing piece of information.

Join the discussion

Comments ( 3 )
  • guest Monday, June 20, 2016

    How , Spring 4 controller bind and send data to html using knockout js ??


  • guest Wednesday, June 29, 2016

    Uncaught ReferenceError: email is not defined

    knockout-3.4.0.js:72 Uncaught ReferenceError: Unable to process binding "submit: function (){return firstTimeLoginData }"

    Message: firstTimeLoginData is not defined

    Spring controller send json data to html page. but i am getting these issue.


  • Ravi verma Wednesday, June 29, 2016

    Uncaught ReferenceError: email is not defined

    knockout-3.4.0.js:72 Uncaught ReferenceError: Unable to process binding "submit: function (){return firstTimeLoginData }"

    Message: firstTimeLoginData is not defined


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.