jQuery Mobile option select list with text search? - jquery-mobile

I have a select option list and im using jQuery Mobile. My list is very long so Id like to give users the option of searching the list by typing in text.
Is there some native / jQuery Mobile way of adding a text search when you focus on the list? If not I guess instead on an input ill need to create a link to a new page with a filter list, and use javascript to populate the 'input' with the value selected.
http://jquerymobile.com/test/docs/lists/lists-search.html

The short answer is no, unless you want to go nuts editing the JQM code to add that feature to the select box. That being said, I also had this problem (with the select menus being way too long), and here's what I did:
For one scenario, I used an autocomplete search box (that had results drop down: http://jqueryui.com/demos/autocomplete/) in addition to the select menu, populated with the data in the select menu. That way the user could choose whether to use the select menu or search.
For a second scenario, I allowed the user to search for something, then brought up a menu (really a dialog plugin) with only the results that matched what they searched for.
Hope this helps.

Personally, I could not get the jqueryui autocomplete to work well with jQuery Mobile. But this autocomplete code from Andy Matthews worked well:
http://www.andymatthews.net/code/autocomplete/
Used in conjection with an input text field, it provides a way for users to type in a few characters and see a list of choices to select.

Related

Dynamic Search Field in Rails

I want to build a search field that give suggestions based on what the user is typing. Like the wikipedia search bar.
It should only query for the title names (not implementing any complex algo). What is the best way to do this with rails: gem and from scratch?
Use select2 jquery plugin. Its documentation is pretty cool as well. Visit https://select2.github.io/examples.html . Pass your collection to your form select box and call the class of it with select2. It will suggest the user according to the input.

jquery ui selectable() and sortable() combine

I am using a twitter jquery plugin to display a list (ul/li) of twitter posts .
Also I want my users to be able to rearrange the posts as they want and I want the moved post to be marked.
I saw a post here how to do so.
If I use this the selectable function doesn't work(I can rearrange but can't select):
$(document).ready(function() {
$(".ul_sortable" ).sortable().selectable();
});
If I use this the sortable function doesn't work(I can select but cant re arrange):
$(".ul_sortable" ).sortable().selectable();
The key is to use the sortable handle option as shown in the link to the other question.
Sortable and selectable both take over the mouse events for the items they are applied to, however the handle option allows you to apply the sorting to a part of the item therefor allowing selectable to work on the rest of the item.
It should also be noted that selecting a bunch of items then sorting them all together is not natively supported.
For marking if an item is moved you can use a variety of sortable events such as stop and change docs

Alternatives to jQuery FlexBox?

Are there any good alternatives to jQuery FlexBox? I need the functionality to select from auto-suggest drop down list and input new values like on a textbox.
So the Autocomplete control from jQuery UI has emerged to be a useful alternative for my own purposes:
http://api.jqueryui.com/autocomplete/
Try this :
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/dropdowngrid.htm
this will contain all functionality of grid.

Make collection_select display as an image (Rails 3 App)

All,
BACKGROUND: I have a collection_select statement that displays a dropdown box.
OBJECTIVE: I'd like the dropdown to be an image that the user clicks to see the collection rather than the default box + down arrow that appears.
You need something like this plugin for jQuery. It allows you to replace a normal select with a custom one based on your wants. You would have to write your own select helper since you need to add the attributes to the select options that this plugin requires. If you get started and need help, post back here with what you're stuck on.

jquery autocomplete script

I have a list of cities name. I just want to do, if user type type "a" in the text box, then all the city name which contains "a" will be displayed in drop down box.
Can someone tell me from where I got this type of script. If you have some link then send me.
thank you
jQuery UI Autocomplete plugin.
http://jqueryui.com/home

Resources