文本框列出jQuery移动文本框

Question

I am building a custom jQuery Mobile auto-complete input box (ie no using a plugin) and I want to use a text box list (ie display non-text elements inside the text field, see tagging in the Facebook text box for an example). I haven't been able to find any resources on how to approach this. Can anyone point me toward something on how to display non-text elements in a jQuery Mobile input box?

Answer 1

You can put pictures in the listview format, would something like autocomplete displaying a listview of items to choose from with the pictures there work ? also jquery mobile listview has an automatic search bar which dynamically filters results built in already:

Here's the link on all the types of listview possible:

Jquery-Mobile Listview

Hope this helps !

In response to your comment It seems that the autocomplete suggestions have to be stored in an array, this can probably be dynamically filled though some request or I you know what the data will be just hard code the suggestions in like this from the jquery ui site:

 <script>
        $(function() {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
            $( "#tags" ).autocomplete({
                source: availableTags
            });
        });
        </script>



    <div class="demo">

    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
    </div>

    </div><!-- End demo -->



<div class="demo-description" style="display: none; ">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->

does this help ? you can see more on it here: http://jqueryui.com/demos/autocomplete/

Sorry to bog you down with the lengthy answer but also the autocomplete can be enhanced to take in pictures see here: http://jqueryui.com/demos/autocomplete/#custom-data which I think could be along the lines of what you're looking for.