来自数据库的Jquery Ui自动完成 [英] Jquery Ui autocomplete from DB

问题描述

我是js的新手.我找到了自动完成教程，它很好用，但是为数据库中的多个值配置了自动完成脚本.找到关键字后，每次都会添加逗号，然后再次搜索新关键字.如何将其重写为单个值?

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

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

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

推荐答案

您应该能够使用远程数据源演示作为指南:

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

这篇关于来自数据库的Jquery Ui自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！