Jquery Ui autocomplete from DB

Question

I'm newbie to js. I found autocomplete tutorial and it works well.But autocomplete script configured for multiple values from db. It adds comma every time after found keyword then searchs for new keyword again. How to rewrite it for single value?

acompl.js

$(function() {
    function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }

    $( "#region" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            source: function( request, response ) {
                $.getJSON( "core/code/includes/search.php", {
                    term: extractLast( request.term )
                }, response );
            },
            search: function() {
                // custom minLength
                var term = extractLast( this.value );
                if ( term.length < 2 ) {
                    return false;
                }
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( ", " );
                return false;
            }
        });
});

search.php

<?php
if ($term = @$_GET['term']) {
    require 'db.php';
    $q = $db->real_escape_string(strtolower($term).'%');
    $query = $db->query("SELECT id, region FROM regions WHERE region like '$q'") or die(mysqli_error());
    $results = array();
    while ($row = $query->fetch_row()) $results[] = array( 'id' => $row[0] , 'label' => $row[1], 'value' => $row[1] );
    echo json_encode($results);
}
?>

Answer 1

you just need to remove the (,) from this.value = terms.join( ", " ); line in select

like (this.value = terms.join( " " );)

Answer 2

We have the same problem. I also found that in my research. Here is how I edited it. Hope it helps

$(function() {
    function split(val) {
        return val.split(/,\s*/); 
    }
    function extractLast(term) {
        return split(term).pop();
    }
    $(".search") 
            .bind("keydown", function(event) {
                if (event.keyCode === $.ui.keyCode.TAB &&
                        $(this).data("ui-autocomplete").menu.active) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                source: function(request, response) {
                    $.getJSON("search/", {
                        term: extractLast(request.term)
                    }, response);
                },
                search: function() { 
                    if(this.value.length < 2){
                        return false;
                    }
                },
                focus: function() { 
                    return false;
                }
    });
});

Answer 3

You should be able to use the remote datasource demo as a guide: http://jqueryui.com/demos/autocomplete/#remote. Replace the string value given to the "source" option with the location of your php script.

Update: I believe you're looking for something like this:

$("#birds").autocomplete({
    source: function (request, response) {
        $.getJSON("core/code/includes/search.php", {
            term: request.term
        }, response);
    },
    minLength: 2,
    select: function(event, ui) {
        log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value);
    }
});