selectivity Native change event with showSearchInDropdown: false

Hi! First, let me say I'm really appreciating selectivity. I struggled with twitter's Typeahead for far too long before abandoning it in favour of Selectivity.

I do like Typeahead's interaction better where the user's typed text appears in an input field instead of in the drop-down menu. Much like your multiple select example. Here's the Typeahead example. I'm trying to more-or-less reproduce it with Selectivity using the showSearchInputInDropdown option.

So, two things: First, an example using showSearchInputInDropdown: false but with an input field showing would be helpful. Second, I note an inconsistency in how change events are handled. In the following, when showSearchInputInDropdown is true, Abc<return> (ie: type a non-existant entry) and Ams<tab> (tab to select a chose entry) don't fire any events. If showSearchInputInDropdown is false, both fire the native change event (Selectivity's additional fields aren't added).

What I'd hope for is that both Abc<return> and Ams<tab> would fire a change event where the event has been augmented with Selectivity's fields.

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="css/selectivity-full.css" rel="stylesheet">

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/selectivity-full.js"></script>
</head>
<body>

<h1>Selectivity Testing</h1>

<div id="search"></div>

<script type="text/javascript">
$('#search').selectivity({
    showSearchInputInDropdown: false,
    items: ['Abu Dhabi', 'Abuja', 'Accra', 'Adamstown', 'Addis Ababa', 'Algiers', 'Alofi', 
        'Amman', 'Amsterdam', 'Ankara', 'Antananarivo', 'Apia']
    }).on('change', function(ev){
        console.log("change event:  added="+ev.added+" removed="+ev.removed+" value="+ev.value);
    }).on('selectivity-selecting', function(ev){
        console.log("selectivity-selecting event:  id="+ev.id+" item="+ev.item);
    }).on('selectivity-selected', function(ev){
        console.log("selectivity-selected event:  id="+ev.id+" item="+ev.item);
     });
</script>

</body>
</html>

Thanks again for the great job so far!

Sep 06 '15 11:09 bwbecker

Sorry for the late reply (I was on my honeymoon when this came in), but this is a very useful suggestion. I don't know exactly how to implement this right now, but I think it's definitely something that a custom input type module should be able to achieve. I'm definitely willing to add this functionality to Selectivity, so I'll keep you posted!

Oct 30 '15 09:10 arendjr

@arendjr

Hey, any news on using a custom input for the search input? I'm using selectivity on a header bar input, it works great, however it looks a bit odd because the dropdown pops up over the text input. I'd like to type into the search input, and then have the dropdown show up right below the text input, kind of like Google's search input.

Right now, if I set showSearchInputInDropdown to false, and then position the popup right below the search input, it looks great, however nothing happens when I type into the input. How can I bind that search input to trigger the same events that the builtin search input fire when you type into it?

Thanks

Jun 17 '16 00:06 robins35

selectivity selectivity copied to clipboard

Native change event with showSearchInDropdown: false

selectivity
selectivity copied to clipboard