Jquery Ui autocomplete from DB

限于喜欢 提交于 2020-01-23 02:19:07

问题


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

回答1:


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



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



回答3:


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

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



来源:https://stackoverflow.com/questions/7049552/jquery-ui-autocomplete-from-db

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!