SELECT LSIT - search in select list with a lot of entries

  • Karlheinz68
  • Karlheinz68's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Patron (Hero Patron)
  • Posts: 21
  • Thank you received: 1

Karlheinz68 created the topic: SELECT LSIT - search in select list with a lot of entries

is there a solution for my problem?

i have a select list with a lot of entries (> 300).

i need a comfortable solution for search in the select list. i think of a textfield, where i can make entries to restrict the selection in the select list.

when i choose in the select list, the cursor jump only to the letter with the word beginn ( i need also a search in the middle of the word or parts of the word) - (sorry for my school english - was in the 80 and 90 years)

see the picture -


thx for help.... :)
#238333
Attachments:
  • Posts: 2734
  • Karma: 93
  • Thank you received: 369

mihaela replied the topic: SELECT LSIT - search in select list with a lot of entries

Hello,

I have answered on the ServiceDesk ticket that you have created:

After some looking into this, I have come up with a quite simple solution.

Just do as follows.
Go to the Advanced properties of the "search" field and in the Actionscript section set Type to Custom.
Under Actions check the "Change" checkbox.
In the code area below that appeared, put the following code:

function ff_search_action(element, action)
{

jQuery('option').prop('hidden', false);
jQuery('option').not(jQuery('option:contains('+element.value+')')).prop('hidden', true);

} // ff_search_action

This should work as you wanted. In the select list, only options containing the string that was entered in the search field will be shown.
NOTE: The change in select list options based on the search field will be made after you click anywhere on the form.

Let me know whether you have managed to apply this to your form and whether this is working as you wanted.


We can continue our conversation through the ticket raised.

Regards,

Mihaela
#238341
The following user(s) said Thank You: Karlheinz68, Eddy.vh
  • Posts: 267
  • Karma: 1
  • Thank you received: 31

Eddy.vh replied the topic: SELECT LSIT - search in select list with a lot of entries

Hello Mihaela.

How to make the same thing work when you have several lists on the same form? How to target the search on a specific list?
#238344
  • Karlheinz68
  • Karlheinz68's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Patron (Hero Patron)
  • Posts: 21
  • Thank you received: 1

Karlheinz68 replied the topic: SELECT LSIT - search in select list with a lot of entries

@mihaela
thank you very much - works absolutely fine -

is there a possibly that the select list is always "open" when i make an input in the textfield "search".

then can i see the choise directly in the select list

thanks again
#238345
  • Karlheinz68
  • Karlheinz68's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Patron (Hero Patron)
  • Posts: 21
  • Thank you received: 1

Karlheinz68 replied the topic: SELECT LSIT - search in select list with a lot of entries

here is the example form

also works with insert the data from database

form pieces --> costum before form

$this->execPieceByName('ff_InitLib'); //Include BreezingForms Library
$db = JFactory::getDBO();//Get Database Object

//Create your own query here
$db->setQuery('Select FIELD From #__Database ');

$result = $db->loadColumn(); //load the result from the query
$test = "";
for ($i = 0; $i < count($result); $i++)
{
$test .= "0;".$result[$i].";".$result[$i]."\n";
}

function ff_setSelectList($name, $value)
{
global $ff_processor;
for ($r = 0; $r < $ff_processor->rowcount; $r++)
{
$row =& $ff_processor->rows[$r];
if ($row->name==$name)
$row->data2 = $value;
unset($row);
} // for
} // ff_setSelectList

ff_setSelectList('select1', $test);[
#238347
Attachments:
  • Posts: 2734
  • Karma: 93
  • Thank you received: 369

mihaela replied the topic: SELECT LSIT - search in select list with a lot of entries

Hello,

Eddy, here is how you can target a specific select list only.
    jQuery('[name="ff_nm_selectlistname[]"] option').prop('hidden', false);
    jQuery('[name="ff_nm_selectlistname[]"] option').not(jQuery('[name="ff_nm_selectlistname[]"] option:contains('+element.value+')')).prop('hidden', true);
NOTE: You have to replace selectlistname with the name of the select list element that you want to apply the search to.

Furthermore, here is the improved version of the code that will make the search case INSENSITIVE:
function ff_search_action(element, action)
{  
    jQuery('[name="ff_nm_selectlistname[]"] option').prop('hidden', false);
    jQuery('[name="ff_nm_selectlistname[]"] option').not(jQuery('[name="ff_nm_selectlistname[]"] option:icontains('+element.value+')')).prop('hidden', true);

} // ff_search_action

jQuery.expr[':'].icontains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
Basically, a new selecteor is defined which finds strings that contain another string regardless of uppercase/lowercase.

@Karlheinz68 as I wrote on the ticket, there is a way to make the select list always "open". You can go to Properties of the select list element and check there the "Multiple" checkbox.
NOTE that this will allow the user to choose more options in that select list.

Let me know whether this helped.

Regards,

Mihaela
#238353
The following user(s) said Thank You: Eddy.vh
Moderators: ForumSupport, tomeperica
Time to create page: 0.068 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here