not able to search dynamic data through a search box

Question

I have a drop-down of location/Region, inside that there is a search box.

As shown in the image, there is a list of places, and then there are regions. The section of region is static and the rest of the places is being fetched from the database. Inside the search box i am able to search for regions but not for dynamic data. One option can be to use DB query but is there a way to perform this functionality without a DB query.

For search, I want each string should match. If user's first letter in search box is "w" then words starting from w should get displayed and not those words who have letter 'w'

<select class="selectpicker select-custom-field location" data-live-search="true" data-live-search-style="begins" title="Location/Region">
    <?php foreach($city as $per_city): ?>
        <option value="<?php echo $per_city->city.','.$per_city->state; ?>">
            <?php echo $per_city->city.', '.$per_city->state; ?>
        </option>
    <?php endforeach; ?>
        <option value="Regions">Regions</option>
        <option value="WEST">WEST</option>
        <option value="SOUTHWEST">SOUTHWEST</option>
        <option value="MIDWEST">MIDWEST</option>
        <option value="SOUTHEAST">SOUTHEAST</option>
        <option value="NORTHEAST">NORTHEAST</option>
</select>

Sample array that i get from $city is

Array
(
    [0] => stdClass Object
        (
            [id] => 1
            [city] => Rochester
            [state] => New York
            [country] => 
        )

    [1] => stdClass Object
        (
            [id] => 2
            [city] => Richmond
            [state] => Virginia
            [country] => 
        )

    [2] => stdClass Object
        (
            [id] => 3
            [city] => Spokane
            [state] => Washington
            [country] => 
        )

    [3] => stdClass Object
        (
            [id] => 4
            [city] => Des Moines
            [state] => Iowa
            [country] => 
        )

)

Can anyone please tell how this can be done

Note: If I remove data-live-search-style="begins" from select tag then the search is occuring but the in that search, if user's first letter is "w" then all the words that contain "w" are getting displayed.

can you print $per_city here? and also tell my which selectpicker you used if any url of your example it will very helpful to me — Jinesh, Feb 01 '18 at 12:17
There are many strategies how you could do it. You could create your own javascript code, e.g. using regular expressions and set some of the options display property to none. This link might help: https://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css. You could look into jQuery or even bigger solutions such as react, angular and co. You need to choose a strategy yourself, but I would recommend you to go with the flow and investigate how to utilise the famous frameworks for this. — Kağan Kayal, Feb 01 '18 at 12:19

score 0 · Answer 1 · answered Feb 01 '18 at 12:16

There are plenty of options, two best in my opinion are:

get the $cities as json and then use filter() with javascript
get it through ajax passing the filter to backends(good when you have a lot of data to be filtered)

Both have drawbacks and advantages:

if you get it via filter passed through ajax then be aware that database will suffer from multiple requests, it can be avoided by giving some delay when user is typing a new filter and/or using cache on backend not to query db multiple times

if you have a lot of data then filtering only with javascript will take some browser memory.

In both solution I suggest returning JSON from backend and create options dynamically with JavaScript, function filtering should be triggered onKeyUp.

Hope it helps.

Jinesh · Answer 2 · 2018-02-01T13:02:06.683

0

you can write like this

<select class="selectpicker select-custom-field location" data-live-search="true" show-subtext="true" data-live-search-style="begins" title="Location/Region">
    <?php foreach($city as $per_city): ?>
        <option data-subtext="<?php echo $per_city->city.','.$per_city->state; ?>">
            <?php echo $per_city->city.','.$per_city->state; ?>
        </option>
    <?php endforeach; ?>
        <option value="Regions">Regions</option>
        <option value="WEST">WEST</option>
        <option value="SOUTHWEST">SOUTHWEST</option>
        <option value="MIDWEST">MIDWEST</option>
        <option value="SOUTHEAST">SOUTHEAST</option>
        <option value="NORTHEAST">NORTHEAST</option>
</select>

edited Feb 01 '18 at 13:02

answered Feb 01 '18 at 12:45

Jinesh

1,554
10
15

it is still picking only static data – Sam Feb 01 '18 at 12:59
https://codepen.io/Rio517/pen/NPLbpP you this link and i change my answer if any helpful to you. – Jinesh Feb 01 '18 at 13:00
it is has started to search for dynamic values, but there is still one part left. the search is not happening letter to letter if user types first letter "w" then all the words starting from w should get displayed, but with codepen code, all the words containing "w" are getting displayed on search – Sam Feb 02 '18 at 04:10
I am sorry i didn't understood, which html are you referring – Sam Feb 02 '18 at 06:51
i want to look html – Jinesh Feb 02 '18 at 06:52
put this data-live-search-style="startsWith" – Jinesh Feb 02 '18 at 07:04
this is my entire code, the only thing extra that i am using is the css and script taken from this link https://silviomoreto.github.io/bootstrap-select/ On downloading the files there is a folder dist, i have used css and js from this folder – Sam Feb 07 '18 at 09:38

not able to search dynamic data through a search box

2 Answers2