LightSwitch has builtin capabilities for selecting related entities via the ‘Modal Data Picker’ control. You can also have drop down or choice lists with static data, however they lack the convenient search and filter mechanisms which render them unusable with large data sets. Luckily there is a plugin called ‘select2’ that does enhance the standard select boxes with searching and other gimmicks for you. And the good thing is you can even combine it with jaydata to grab other data sources and have server side sorting and filtering applied without the hassle of coding ODATA REST calls manually.
So below you find a snippet which renders a ‘select2’ box and have jaydata query some data source and load it into the control. The search term from the ‘select2’ control is send over to jaydata which will pass it as a parameter to the ODATA service and have filtering applied on the server (it will generate a ‘$filter’ query string for you).
Grabbing the effectively selected data is then done via the “change” event and inserted into ‘contentItem.value’ (via grabSelectedValue() which is not shown here). And there you are – that’s all.
Note: ‘select2’ is not really jQuery mobile aware. So when using it with LightSwitch you have to define the control with ‘data-role: none’. Otherwise it will render in a pretty ugly way.
In case your browser does not render the Gist correctly you can view the code directly at: https://gist.github.com/dfch/f2d1df81136f1dff6b10.