Sample Doubt

[pafcosta]

Hi,

I'm trying to use your plugin but in my project, but when i tried to use. it shows like a combo, not like a input text. as your sample.

   <form>
                <div class="form-group">
                    <input type="text"
                           placeholder="Programming language name"
                           class="form-control flexdatalist flexdatalist-set"
                           data-min-length="1"
                           list="languages"
                           name="language">
                </div>
                </form>

        <datalist id="languages">
            <option value="PHP">PHP</option>
            <option value="JavaScript">JavaScript</option>
            <option value="Cobol">Cobol</option>
            <option value="C#">C#</option>
            <option value="C++">C++</option>
            <option value="Java">Java</option>
            <option value="Pascal">Pascal</option>
            <option value="FORTRAN">FORTRAN</option>
            <option value="Lisp">Lisp</option>
            <option value="Swift">Swift</option>
        </datalist>

Can you help me?

Thanks, /Paulo Costa

[jotahws]

Do you mean a combo like this: ?

If so, it is normal having that little arrow in the left. Even so, you should still be able to type letters to search in the datalist

[pafcosta]

Yes it's. Just asked because in the sample page, this litle doesn't appear and inspecting the code and js, the plugin some how create a input and hide the selectbox.

Meanwhile this can be hide using css trick.

Thanks for your feedback.

[jotahws]

To be frank, i personally don't like using <datalist> to add data to flexdatalist...

In my opinion, adding a JSON data via JQuery is much easier and dynamic, for example:

$('#input').flexdatalist({
         searchIn: 'value',
         minLength: '1',
         data: [
            {"value": "php"},
            {"value": "Open"},
            {"value": "Close"}
          ]
});

And if you want to change data along the way (using ajax to search in database for example), you can do it by using the method $.flexdatalist('data', 'My new data')

Besides, if you use it like that, the little arrow will no longer appear, because it is not a <datalist> anymore.

Best Regards, João

[sergiodlopes]

Hi,

Yeah, flexdatalist started from the <datalist> (basic, browser specific autocomplete) implementation in mind, but something more flexible (sorry), UI and data wise.

I try to give it as much events available as possible so that anyone can customize the behavior as they like.

Also being careful about features that are requested to implement, because, otherwise starts to become a autocomplete input text field that wants to be a select box, being bloated and so on. As I think you know, if you set minLength to 0, it should show all options available, almost like a select, which might already be too much for what flexdatalist tries to be. :)

Cheers!