Question

I have implemented Flexbox as an autocomplete solution for a list of courses. I have simply passed it a full list of the courses fetched from the DB, in the proper JSON format. I was under the impression that it would take care of narrowing down the list of matches as I type, but instead, it just prints the entire list and highlights the matching characters.

Do I have to write my own server side script to dynamically narrow the results as I type? I thought passing it a list would be sufficient, since the documentation specifically notes:
“In all of the examples that call “results.aspx”, the data is a list of 105 english words”.

Thanks for anyone’s input. My code is below:

    var courseList = <?= $course_list; ?>;             

    $('#course').flexbox(courseList, {
        initialValue : '<?= $pre_fill['course']; ?>',
        watermark: 'Search for course/session name',
        paging: false,

    });

    $('#course_input').change(function() {
        $('#course_hidden').val($(this).val());

    });

Answer 1

I also would like to know the issue to this. After creating a dynamic data source on the backend, if I copy and paste the data object in the format:

{"results": [{"id":"key","name":"value"},...]}

the filtering works as planned. Does anyone know what the deal with the “results.aspx” page is at the Flexbox homepage and why/how it works correctly?

Edit:

I think I figured it out for me at least. On the backend, you have to write a query that utilizes the “q” parameter that gets passed back to the server. Thus, you have to do your own filtering on the backend using the named parameter “q” in whatever fashion you would like. For me, I was trying to filter times so an example was:

for ($k=0;$k<=1;$k++){
        //AM PM
        for ($i=1;$i<=12;$i++){
            //hours
            for ($j=0;$j<=3;$j++){
                //minutes
                $AMPM = "AM";
                $thej = ($j*15);
                $thei = ($i);

                if($k == 1){
                    $AMPM = "PM";
                }
                if($thej == 0){
                    $thej = "00";
                }
                if($thei != 10 && $thei !=11 && $thei !=12){
                    $thei = "0".$thei;
                }
                if($q != ""){
                    if(preg_match("/$q/i", $thei.":".$thej." ".$AMPM)){
                        $subarray = array("id" => $thei.":".$thej." ".$AMPM, "name" => $thei.":".$thej." ".$AMPM);
                        $newarray[] = $subarray;
                    }
                }
                else{
                    $subarray = array("id" => $thei.":".$thej." ".$AMPM, "name" => $thei.":".$thej." ".$AMPM);
                    $newarray[] = $subarray;
                }

            }
        }
    }
    $finalarray = array("results"=>$newarray, "total"=>count($newarray));
    header('Content-type: application/json');
    print(json_encode($finalarray));

Messy now, but I’ll clean it up later. Hope this works for you!