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);
}
?>

Andrew Whitaker · Accepted Answer · 2011-08-14 14:53:47Z

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);
    }
});

edited Aug 14, 2011 at 14:53

answered Aug 13, 2011 at 14:18

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tural Ali Over a year ago

can you edit my code?

<script> 	$(function() { 		function log( message ) { 			$( "<div/>" ).text( message ).prependTo( "#log" ); 			$( "#log" ).scrollTop( 0 ); 		}  		$( "#birds" ).autocomplete({ 			source: "search.php", 			minLength: 2, 			select: function( event, ui ) { 				log( ui.item ? 					"Selected: " + ui.item.value + " aka " + ui.item.id : 					"Nothing selected, input was " + this.value ); 			} 		}); 	}); 	</script>

I don't understand what to do

Andrew Whitaker Over a year ago

@Tural: What issues are you having specifically? Are you receiving an error message? I am not available on skype but I would be happy to help via a chat.

Fritz · Accepted Answer · 2014-02-15 07:45:16Z

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;
                }
    });
});

user3213856 · Accepted Answer · 2014-03-28 09:42:07Z

0

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

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

edited Mar 28, 2014 at 9:42

answered Mar 28, 2014 at 5:39

user3213856

216 bronze badges

Collectives™ on Stack Overflow

Jquery Ui autocomplete from DB

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related