CODEWITHSUNDEEP
javascriptjquerydrupaljquery-ui-autocomplete
penone
penone

Reputation: 792

Add a dropdown arrow to jquery autocomplete text field

I have a form with 2 fields - vendor and pav. The vendor currently is an autocomplete textfield that, once a vendor is chosen it populates the pav field with the corresponding value. What I would like to do is add a drop down arrow and or scroll bar on the text field so that once the user begins typing they can scroll up and down. What I would really like to do is change the text field to a autocomplete comobox but the tutorials I found were a bit advanced for my limited knowledge in jquery.

Another option I did find was to show the entire list once a user focuses on a field using 

.bind('focus', function(){ $(this).autocomplete("search"); } );
but am unclear as to where to put this in my code.

Following is my jquery code for the autocomplete:

Drupal.behaviors.mywebform = {
    attach: function (context, settings) {
        $('#edit-submitted-vendor-exhibitor-info-pav').val(""); 
        $("#edit-submitted-vendor-exhibitor-info-vendor").autocomplete({
            source: "/shipONE/sites/vendorarray.php",
            minLength: 1,
                
            select: function(event, ui) {
                $('#edit-submitted-vendor-exhibitor-info-vendor').val(ui.item.vendor);
                $('#edit-submitted-vendor-exhibitor-info-pav').val(ui.item.pav);            
            }
        });
   }
};

And the code for my php that returns the values from the database:

$return_arr = array();
 
if ($conn)
{
    $ac_term = "%".$_GET['term']."%";
    $query = "SELECT * FROM vendors2 where vendor like :term";
    $result = $conn->prepare($query);
    $result->bindValue(":term",$ac_term);
    $result->execute();
     
    /* Retrieve and store in array the results of the query.*/
    while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
        $row_array['pav'] = $row['pav'];
        $row_array['value'] = $row['vendor'];
        $row_array['pav'] = $row['pav'];
         
        array_push($return_arr,$row_array);
    }
}
 
/* Toss back results as json encoded array. */
echo json_encode($return_arr);

Upvotes: 0

Views: 1364

Answers (1)

penone
penone

Reputation: 792

I was able to get the focus on field working (which also gave me a drop down with scrollbar) by doing the following:

New JS

       Drupal.behaviors.mywebform = {
attach: function (context, settings) {
        $('#edit-submitted-vendor-exhibitor-info-pav').val(""); 

        $("#edit-submitted-vendor-exhibitor-info-vendor").autocomplete({
            source: "/shipONE/sites/vendorarray.php",
            minLength: 0,
            scroll: true,
            select: function (event, ui) {
    $(this).autocomplete('disable');
$('#edit-submitted-vendor-exhibitor-info-vendor').val(ui.item.vendor);
$('#edit-submitted-vendor-exhibitor-info-pav').val(ui.item.pav);
}
}}  .blur(function(){
        $(this).autocomplete('enable');
    })
    .focus(function () {
        $(this).autocomplete('search', '');
    });

}};

And also added to my css the following to add a scroll bar and limit the options being shown:

.ui-autocomplete { 
height: 200px; 
overflow-y: scroll; 
overflow-x: hidden;}

Upvotes: 0

Related Questions