var data = [];
$('.larg-list a,.small-list a').each(
function(){
var text = $(this).text();
var url = $(this).attr("href");
var cat = $(this).closest('Section').attr('id');
var id = $(this).data("id");

    var myitem = new item(text, url, cat, id);

    data[data.length] = myitem;

});

function item(text, url, cat, id) {
this.text = text;
this.url = url;
this.cat = cat;
this.id = id;
}

//assign array of object data not word
$('#srch-term').flexdatalist({
minLength: 1,
searchIn: 'text',
data: data
});

Hello,
I found it's quite difficult to parse "clean" JSON data from Google Spreadsheet, then I finally can render it by using a PHP method, but somehow I can't get data from it.

My code is as below, including the url to php:

<input id="autocomplete-input" type='text' class='flexdatalist' data-data='http://xoay.tv/quang.php' data-search-in='Tên khách hàng mới:' data-search-contain='true' data-search-by-word='true' data-min-length='2' data-visible-properties='["Tên khách hàng mới:","Sheet1[0].dia_chi","Sheet1[0].ma_so_thue"]' data-selection-required='true' data-value-property='ten_khach_hang_moi' name='country_name_suggestion'>

Please help, I'm not even a programmer :)

Thanks!

Can you please advice on how to focus on a search field?

I assume flexdatalist generates a new input field suffixed "-flexdatalist" which carries the text input, while the original input field is storing the selected value.

Trying to focus() on that field $("#somfield-flexdatalist").focus(); doesn't work (without any errors raised).

Any hints please?

Thanks in advance!

I could reproduce this with the following code on Chrome and Safari on OS X.

• Click on input
• Select any element
• Click on input
• Ctrl-A || Cmd-A || (right click && select all)
• Press backspace
• The selected element has disappeared

To make it reappear, you need to blur and refocus. Note that I could not reproduce it on your demo page, so it is possible that there is something wrong with the code below. Please let me know if that's the case.

<link rel="stylesheet" href="jquery.flexdatalist.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="jquery.flexdatalist.min.js"></script>

<style type="text/css">
  input {
    width: 100%;
  }
</style>

<input class="yesNoData" type="text" name="dataField">

<script type="text/javascript">
$(document).ready(function() {
  $('.yesNoData').flexdatalist({
    minLength: 0,
    valueProperty: 'value',
    visibleProperties: ['name'],
    searchIn: 'name',
    data: [
      {
        name: 'Yes',
        value: 'YES'
      },
      {
        name: 'No',
        value: 'NO'
      }
    ]
  });
});
</script>

The text persist only in the input cloned, the text typed is not copied to the master input, which is well, but is confused when you left (blur) the input and text stay there.

PD. Congratulations for the plugin, is the best I found after an exhaustive search.

Hello, thank you for great job with this module.
I got two questions:

1. how do i set default value if using for editing some existing record ?
   If i simply set value="" , event "change:flexdatalist" is being triggered 3 times while loading,
   so if i have some duplicity control bind to the event it trigger my modal windows.

2. can i use the flexdatalist input to be used to add new values ?

Thank you.

I am trying to limit the amount of "tags" that can be added for a search field. But from looking at the docs and the source code, it doesn't seem like there is an option for this.

Basically i want to limit the number of tags to 3/4.

Can anyone think of a way this can be achieved,

How do i add a record that says No records found when no elements are matched?

hii,

when i press esc from keyboard dropdown does not close.

Please add this repository to NPM.

I use meteor.js and the importance of versioning.

Hi Sergio,

i try to find all selected ID's but i get only the Text.
Any way to get all selected ID's?

I made some changes for me.
New default option:
dataValues : [],

Line 862-865:

                var l = _options.dataValues.length;
                while(l--) {
                	$li.attr('data-' + _options.dataValues[l],val[_options.dataValues[l]] );
                }

Now i can decide wich values i want to have as new attributes in the LI

Hey, it's me again.

I found one more thing, don't know if it's a bug.

Let's say we set minLength to 3. I search for Country names - in this case Germany.
So I type in "Ger" and the list show up.
Now if i remove the focus from the field the list goes invisible.
Then i focus the field again with my previous typed "Ger" but the list only show up again when i remove or add a character.

In my opinion it should show the list on refocus the field if there is a matching text in it.

As I said, don't know if it's a bug but it would be nice to hear from you.

Greetings

Hello Sergio,

I've tried jquery-flexdatalist in my project.
So, this error occurred because $.attr() can't be change type property. (> v1.8.3)

How about changing it as follows?
(Unless you use $.attr() for a special reason)

$this.addClass('flexdatalist flexdatalist-set').prop('type', 'hidden');

https://github.com/sergiodlopes/jquery-flexdatalist/blob/master/jquery.flexdatalist.js#L207

Great work!

This is $.attr() and $.prop() example.

jQuery v1.8.3 attr sample
http://codepen.io/tokutoku3/pen/PWXELm
jQuery v1.9.1 attr sample
http://codepen.io/tokutoku3/pen/apPEMg

Hey,

I'm using you plugin but I have some issues, I think it is good if you can improve it.

1. I need an api to set my filter function because now Im using Firebase, and I need to call an API Firebase filter function. You api function which send POST request can't handle a custom remote filter function.
2. Input text losts focus everything loading page. Even thought, I set manually autofocus for it.

Hi,

A big shoutout for your hard work!

I'm having a weird bug with flexdatalsit (latest release 1.9.3), it seems like default values are run by a "substring" match rather than a perfect one...

I do have default values fed on the plugin. The json source data is structured this way:

[ { "id": "1", "capital": "Madrid", "country": "Spain" }, 
 { "id": "2", "capital": "Buenos Aires", "country": "Argentina" },
 { "id": "20", "capital": "Kuala Lumpur", "country": "Malaysia" },
 { "id": "10", "capital": "Ottawa", "country": "Canada" } ]
}

I would like to have id=1 and id=2 as default values, I tried this first:

		$('.flexdatalist').val('1,2').flexdatalist({
			     minLength: 0,
			     valueProperty: 'id',
                             textProperty: '{country}, {capital}',
			     selectionRequired: true,
     			     visibleProperties: ["capital","id","country"],
			     searchIn: 'country',
			     data: 'c.php',
		});

and then I opted for the more "conventional" method:

	  	<input type='text'
		      placeholder='Choose the country'
		       class='flexdatalist'
		       multiple='multiple'
                       value='1,2'
			       >

Both methods would display ALL instances where id contains 1 or 2 INCLUDING id=10 id=20...

Could you look into this, I would like to have id searched on a "perfect match" logic.

Thanks

Hey,

if i set the option selectionRequired to false, the text pointer always jump to the end of the string if i start writing somewhere else except at the end.

For example: I want to write the Word "Hello" but instead i wrote "Hlo" so i jumped back after the "H" to write the missing Characters "el". After writing the e the pointer is jumping to the end of the field.

It seems there is no possibility to change that with the given options.

Would be nice to get a possibility to avoid that problem.

Greetings

This is very comprehensive. Just one thing that jumps out at me - it would be good to have the ability to remove 'multiple' tags by using the backspace key, not just the 'x' button on the tag.
Great work!

how to add custom post variable for remote url?

Your plugin looks great!

Would you consider allowing different search strategies?

As a reference, I find the search behavior of selectize really useful.

Any thoughts?

Hi again,

How do i can get information from url via ajax and send parameters aditional ?

Thanks!

is this support bootstrap 3?

If selectionRequired is false, a input's value can be different if a user only types it vs selects it.

But for our use case the user needs to be able to type any custom string. Disabling the search feature will help prevent users from accidentally typing their selection instead of selecting it.

Edit: I (or someone else who stumbles on this issue) may also be able to help with this if you can point me to the right places in the code.

Hii,
how can i get selected value empty if there is no match?

I have JSON data that includes 3 related properties.

[
  {
    "organization": "McDonalds",
    "city": "Las Vegas",
    "state": "NV"
  }
]

One property is for the input field on which flexdatalist is initialized on (In my example it is organization). When an autocomplete selection is chosen, the organization field is populated perfectly. At this point, I would like to somehow specify two other form fields and have those form fields be populated with the other two related properties. Is that possible via flexdatalist?

Hi Sergio,

Hope your fine.

I've tried to add a new value; not in the datalist, but in the selected value :

I've used the following code, based on one of your example :

<form class="col-md-4">
         <input 
		    id="language" 
			type='text' 
			placeholder='Programming language name' 
			class='flexdatalist' 
			data-min-length='1' 
			multiple='multiple' 
			value="PHP, Cobol, Java, Pascal"
			list='languages' />
      </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>
		 
      <button class="btn btn-default" data-value="C#">Add C#</button>
      <button class="btn btn-default" data-value="Lisp">Add Lisp</button>
      <button class="btn btn-default" data-value="Swift">Add Swift</button>

	  <script src="jquery-3.1.1.min.js"></script>
	  <script src="bootstrap.min.js"></script>
	  <script src="jquery.flexdatalist.js"></script>

      <script>
         $(document).ready(function() {
		 
            $('.btn').click(function(e) {
               e.preventDefault();
               $('#language').val($(this).data('value'));
            });
			
            $('#language').change(function(e) {
               alert($('#language').val());
            });
			
         });
      </script>

The $('#language').val() instruction reset the value to the new one.
Is there somewhare a "add()" method to add a new value to the existing list ?

Have a nice day.

If a user is tabbing through form inputs, the datalist stays visible until the user tabs into the next flexdatalist input.

The datalist should preferably disappear as soon as the user tabs away.

If you point me to the place in code where this is happening, I may be able to do a PR for you. Though word of caution I'm not a frontender.

Hi Sergio,
Stunning plugin you have there, I have an issue trying to load data in json format, I am using the exact same data as you provide but I get this error 405 (Method Not Allowed).

I am pretty sure about the path of the data, also, I am running this on a localhost.

all hidden element duplicate and show with id "...-flexdatalist"

i am reset/clear form field with function

function clearForm(frm){
   $("#"+frm).find('input:text, input:hidden ,input:password, input:file, textarea').val('');
}

how to fix this?

I am using version 1.8.1 and I have a multiple autocomplete and I cannot reset values (clear selections)
Example:
I selected Value 1 and Value 2. I did $('#salesChannel').val('') but the values still appear on the screen.
I also added $('#salesChannel').parent().find("ul.flexdatalist-multiple li.value").remove().
Now the screen is empty as expected. When I try again the autocompletion I can see Value 3, Value 4 but not anymore Value 1 and Value 2
I suppose there is a list of previously selected values which I don't know how to clear.

Hello Sergio

I can't find on the net any documentation so, excuse me if the question seems trivial : how can I detect that the user remove values ?

In your samples, you've one called "TOGGLE VALUE(S) ON CLICK/TAP" with already two values and the small "x" button to remove them one by one.

By removing "Nicaragua" f.i., the list of IDs just below still mention his ID. Even by removing Portugal, IDs stays.

How can we implement a function that will be called when the user remove an items ?

(my real worl need : by removing a value, I need to refresh my treeview and by removing all values, my treeview should display everything).

Thanks Sergio !

Hello, great job.

Is it possible to add any value to the input? Something like $('.flexdatalist').val('Hello').

Thank you in advance.

Hey,

it's me again.
This is not a bug but a nice feature i think.

At the moment you have to pass the data by creating a new flexdatalist. To update this data or set new data you have to use the delete function and recreate a new flexdatalist with the new object.

It would be a nice feature to update the data on the fly without destroying and creating a new list.
The problem with destroying is, if the list gets destroied while typing in an input field you lose your focus to this field.

An "updateData"-like Method would be a nice feature.

Greetings

P.S.: In my example i delete entries which are already in an input field to avoid duplicates. But if i change my mind and remove the string i need to add it again to the list. This all happens on keyup event means while typing in the input field.

Preferably have an option to dropdown without any user input, like the native datalist implementation.

I'm really interested in using this as cross-browser support is finicky and it seems to be one of the few plugins with recent activity.

Hi Sir,

How can i do to display the list and select an option?

Very thanks for this amazing plugins.

Congratulations.

Hello,

I have a sticky bar along the top of the viewport using position fixed. The dropdown list loads fine, but then when i scroll, the dropdown list scrolls with the page, and not fixed to the bottom of the sticky header.

I have thought about the best way to overcome this and i can up with this idea.

Have an option that allows you to change weather its a fixed position, or an absolute position. I could just change the CSS to what i need, but if you have multiple instances of the dropdown in different places throughout a website, you might want both a fixed position and an absolute position. Also we will need to recalculate the top/left position depending on which positioning you choose.

I make it sound easy, but i know its not as easy as it sounds (for me anyway) as i have had play with the source code and couldn't figure it out.

If you have any other ideas on the best way to implement this, that would be great.

Thank you for your previous quick fix. By the way, it's a great plugin.
Another small bug:
$('#' + list).find('option').each(function () {
var val = $(this).val();
_options.data.push({
label: val,
value: val
});
Instead of label: val I think it should be label: $(this).text() because in datalist option you have pairs of value-text.

Uncaught SyntaxError: Invalid regular expression: /[/: Unterminated character class

I have just included flexdatalist and really like it very much - thank you!

Hi, sorry for my bad english.

I'm trying to fetc data from a remote API that request POST requests. When I try to get data, the request is a GET:
GET /api?keyword=to&contain=false&selected=

When I read the doc, normally the default method is POST:

URL to remote data source. This is useful when data is just too big to pass to data option. The POST request will send parameters:
keyword: The current input keyword
contain: The searchContain option value

I think it is possible to change with params, but I can't find documentation about this option. How can I POST my searches to the url ?

Hello Sergio :)

Thank You for your great plugin.

When I select an option from the list, this option is no longer available in the list.

Is it a way to add multiple times the same option into Input ?

Thank you in advance.

$('.flexdatalist').flexdatalist({ minLength: 3, searchContain: true }).on( "select:flexdatalist", function(event, input, text, options) { /* Some code here */ });

Hey, back again. Sorry I was stuck on this for a few hours, and seem to have just diagnosed it.

This works great:

<link rel="stylesheet" href="public/css/jquery.flexdatalist.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="public/js/jquery.flexdatalist.min.js"></script>

<input class="flexdatalist yesNoData" type="text" name="dataField">

<script type="text/javascript">
$(document).ready(function() {
  $('.flexdatalist.yesNoData').flexdatalist({
    minLength: 0,
    valueProperty: 'value',
    visibleProperties: ['name'],
    searchIn: 'name',
    data: [
      {
        name: 'Yes',
        value: 'YES'
      },
      {
        name: 'No',
        value: 'NO'
      }
    ]
  });
});
</script>

This does not:

<link rel="stylesheet" href="public/css/jquery.flexdatalist.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>

<input class="flexdatalist yesNoData" type="text" name="dataField">

<script src="public/js/jquery.flexdatalist.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  $('.flexdatalist.yesNoData').flexdatalist({
    minLength: 0,
    valueProperty: 'value',
    visibleProperties: ['name'],
    searchIn: 'name',
    data: [
      {
        name: 'Yes',
        value: 'YES'
      },
      {
        name: 'No',
        value: 'NO'
      }
    ]
  });
});
</script>

Note the only change is moving where the library is being imported. Are you waiting for the document to finish loading before starting any business logic?

Hi Sergio.

First of all, thank you for your great and amazing plugin. Really nice. Congrats !

Small question : how to allow the user to type a value that is not in the datalist ?

My wish : I've filled in the datalist with tags. By selecting a value, I've on "onExit" trigger and make an ajax request against my server who respond with a json answer. Just like a search engine. That works great (like your "countries multiple select" examples)

Now I would like to allow the user to type a new value, not in the data-list, and then search for that value.

Can you guide me please ?

Thanks a lot.

Hi Sergio and thanks for your plugin !
English is not my primary language so forgive my mistakes. I hope i will be clear enough.

I configure a custom flexdatalist to have multiple values and authorize values not from the data (selectionRequired=false). The datalist is read in a database thanks to a call to an url which send back a json object. That works great.

In my application, i have that screen :

In the case of the previous screen, "{ResourceName}", "{Country}" and "{Status}" are values which are in the datalist. "Value1NotInSelection" and "Value2NotInSelection" are not.

When i click Save Button, the string "{ResourceName},{Country},{Status},Value1NotInSelection,
Value2NotInSelection" (corresponding to the flexdatalist value is recorded in my database.

When i want to edit this record, i do this

But, only the values which are in the datalist appear in the flexdatalist :

I tried a lot of things but i could not succeed in having all the values (including values not in the datalist) at the initialization of the plugin.

I hope i'm clear enough
Thanks
Edouard

Hi,

This might sound silly but i'm really just trying to pre-populate the input, with say a simple array like var preload= ["1","2","3"], the elements of the array being the valueProperty parameter of the flexdatalist object.
It kind of works to just resort to jquery's val() but i'm losing the 'tag' effect on Internet Explorer 10... and on Firefox and Chrome, I get the id displayed instead of the name

It would something along the lines of:

var preload= ["1","2","3"];

$('.flexdatalist').flexdatalist({
       value: preload,
       valueProperty: 'id',
       visibleProperties: ["id","name"],
       searchIn: 'name',
        searchContain: true,
       data: 'somesource.json'
   });

Thanks,

your data list uses this syntax - <option value="PHP">PHP</option>

what if want to use - <option value="123">PHP</option> which is data from a database

this does not seem to work - i get back all records in the db

this is site, search by category (Golf Clubs - Courses) - http://barossalink.businesscatalyst.com/

Hello Sergio,

great job, thanks a lot.

Can you please change a small thing?

multiple: $this.attr('multiple'),
to
multiple: false,

So the HTML-Input element dont need the attribute "multiple".

Thank you.

Hi,
After you commited and fixed the "clear value on multiple values input", it is not working anymore to clear the single input:
Before this code used to work:
$('#customerId-flexdatalist').val('');
$('#customerId').val('');

Now, it brings back after 2-3 seconds (window.timeout!?) the previous value.

Hello,

When using this script, i seem to be getting an error in IE that is caused by the Placeholder on the input field.

I was using V1.8.7 but also updated to V1.9.4 but still getting the same error, slightly confused as the demos on your website are working properly.

My code is as below

            $('.search__location-field').flexdatalist({
                requestType: 'get',
                minLength: 0,
                visibleProperties: ["name", "amountOfVillas", "location"],
                searchIn: 'name',
                data: '/autocomplete.json',
                groupBy: 'category',
                selectionRequired: true,
                toggleSelected: true,
                maxShownResults: 5,
                limitOfValues: 1,
                searchContain: true,
                valueProperty: '*',
            });

<input type='text' placeholder='Where do you want to go?' class='search__location-field' name='search__location-select' multiple='multiple' id="tbx_Search_Location">

The error I'm getting is when i click on the input field, and then select one of the items from the dropdown

Line 912:                         value = JSON.parse(value);

When i put a breakpoint on that line in dev tools, the value is showing the content that is within my placeholder (Where do you want to go?).

When i remove the placeholder it works fine, But i need the placeholder to be there.

Any ideas what could be causing this issue?

The problem is only on IE 11 and 10, 9 works due to no support of the placeholder attribute.

On mobile safari (and hence chrome too), you have to focus, press OK and the keyboard, and focus again to get the dropdown.

// The first event will work, yet listening to the second won't

$("#answer-all-answers-input").on("shown:flexdatalist.results", function (event, results) {
$(".flexdatalist-results").css("border", "1px solid rgb(204, 204, 204)");
$(".flexdatalist-results").css("border-top", "none");
});

    $("#answer-all-messages-input-flexdatalist").on("shown:flexdatalist.results", function (event, results) {
        console.log("messages");
        $(".flexdatalist-results").css("border", "1px solid rgb(204, 204, 204)");
        $(".flexdatalist-results").css("border-top", "none");
    });

Hello @sergiodlopes.

I'm loving your project so far. Congrats again on the searchByWord feature.

I found a couple of bugs however (v. 1.9.1):

1. When pressing the space bar, the current results are lost, i.e.

2. On the next keypress after the space bar, some highlight code gets into the output: