input type text...jquery

[jimfog]

If you go to store an event in outlook.com calendar a modal appears with a start field from where you can choose the time that

the event starts.

 

It is an input type="text" element but what puzzles me is that this element does give the option of creating drop down menus as in this case here.

 

It seems that jquery is utilized to create the drop-down menu but the question is how this is done.

I want to build something similar in the calendar app I am using and I am trying to understand why the developers did not use a simple select element like in the case of the duration field next to it.

[justsomeguy]

They use an onclick event on the field to show an element that has the options in it. Among other things, it allows for a dropdown box that you can type in (to filter, add a new entry, etc).

[jimfog]

I am having difficulty pinpointing the event handler of that click event. I am using Chrome DevTools and on the corresponding input element I have

set a DOM breakpoint.

 

This "leads" me to two files,jquery and wlive.js but I cannot locate exactly where is this click event handler.I mean devtools point me to some code but I cannot understand how this is related to the click handler.

Where do you see it exactly?You would be very helpful to direct me here.

[justsomeguy]

I don't have an account on outlook.com, I'm just speaking generally about how that is done. There's another example here, look at the state dropdown:

 

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/form/xml-form.html

 

Notice how you can type in it to filter the options. That's a text field with some extra stuff added to it, presumably the same type of thing as what you're describing.

 

Like with Ext JS, I seriously doubt they would manually put a text field on that page and then write a click handler for it. I almost guarantee that they are using a component which has all of those options implemented, and when they add a field like that to the page they create a new component and set their options.

 

For example, on the page I linked to above, the way they create that dropdown is with this config object:

{  xtype: 'combobox',  fieldLabel: 'State',  name: 'state',  store: Ext.create('Ext.data.ArrayStore', {    fields: ['abbr', 'state'],    data : Ext.example.states // from states.js  }),  valueField: 'abbr',  displayField: 'state',  typeAhead: true,  queryMode: 'local',  emptyText: 'Select a state...'}

That says that the component to create should be a combobox component, and they set other properties that they want to override for the defaults for the combobox component. Here is the API documentation for the combobox component which lists the various configuration options for it, as well as all of the properties, methods, and events that the instantiated object will have:

 

ComboBox

 

Note that they don't need to set a click handler, all of that happens automatically in the constructor for the component. That's the point of reusable components, so that you don't need to rebuild the thing every time you want to use one. I don't know what interface library outlook.com is using, but they would be using a similar component model. In the code to make that dropdown they create whatever component they are using and set the options that they want on it.

[jimfog]

I understand now what are you talking about.

The first thing that comes in my head right now to search for a jquery plugin that makes a similar job.