文章/答案/技术大牛

发布

社区首页 >问答首页 >自动完成文本框从数据库中提取建议？

问自动完成文本框从数据库中提取建议？
EN

Stack Overflow用户

提问于 2014-08-05 00:36:40

回答 3查看 5.9K关注 0票数 0

我已经创建了两个自动建议文本框，其中一个是从服务器端获取数据，另一个是从客户端获取数据。但是服务器端文本框不是working.Can，任何人指出我代码中的错误。

以下是我的HTML代码：

<html>
  <link type="text/css" rel="stylesheet" media="all" href="jquery-ui-1.8.9.custom.css" /> 
  <script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
  <script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script> 
  <script type="text/javascript" src="languages.js"></script> 
  <body>
    <label for="languagesClientInput">Select Language(client-side): </label>
    <input id="languagesClientInput" />
    <br />
    <label for="languagesServerInput">Select Language (server-side): </label>
    <input id="languagesServerInput" />
  </body>
</html>

以下是Js代码：

$(function() {
    var languages = [
         "C",
  "C++",
  "Core Java",
  "Advance Java",
  "PHP",
  ".NET",
  "XML",
  "HTML",
  "Javascript",
  "jQuery",
  "JSON",
  "Ajax",
  "C#",
  "ABC ALGOL",
  "ADA",
  "ABLE",
  "COBOL",
  "BLUE",
  "Pearl",
  "Python",
  "Oracle",
  "Haskell",
  "BASIC",
  "BeanShell",
  "Bliss",
  "BETA",
  "GOTRAN",
  "FORTRAN",
  "Focal",
  "Genie",
  "GOAL",
  "GROOVY",
  "JOSS",
  "JEAN",
  "JOVIAL",
  "JOY",
  "Maple",
  "MATLAB",
  "MORTAN",
  "MUMPS",
  "Miranda",
  "NetRexx",
  "NPL",
  "NXT-G"
    ];

$("#languagesClientInput").autocomplete( { source: languages });
$("#languagesServerInput").autocomplete( { source: "languages.php" });

});

以下是Php代码：

<?php

$searchTerm = $_GET['term'];

$languages = array(
  "C",
  "C++",
  "Core Java",
  "Advance Java",
  "PHP",
  ".NET",
  "XML",
  "HTML",
  "Javascript",
  "jQuery",
  "JSON",
  "Ajax",
  "C#",
  "ABC ALGOL",
  "ADA",
  "ABLE",
  "COBOL",
  "BLUE",
  "Pearl",
  "Python",
  "Oracle",
  "Haskell",
  "BASIC",
  "BeanShell",
  "Bliss",
  "BETA",
  "GOTRAN",
  "FORTRAN",
  "Focal",
  "Genie",
  "GOAL",
  "GROOVY",
  "JOSS",
  "JEAN",
  "JOVIAL",
  "JOY",
  "Maple",
  "MATLAB",
  "MORTAN",
  "MUMPS",
  "Miranda",
  "NetRexx",
  "NPL",
  "NXT-G"
);

function filter($language) {
  global $searchTerm;
  return stripos($language, $searchTerm) !== false;
}

print(json_encode(array_values(array_filter($languages, "filter"))));

?>

php

jquery

html

javascript

回答 3

Stack Overflow用户

发布于 2014-08-05 00:46:46

array_filter函数失败。如果您删除它，您将获得所需的数据。实际上，我认为您在这里犯了一个错误，编写array_filter而不只是filter来调用您上面编写的函数。

票数 0

Stack Overflow用户

发布于 2014-08-05 01:26:05

您不需要array_values函数。这对我很有效：

// languages.php
<?php

function filter($language) {

    global $searchTerm;

    return stripos( $language, $searchTerm ) !== false;

}


$searchTerm = $_GET['term'];

$languages = array(
    "C",
    "C++",
    "Core Java",
    "Advance Java",
    "PHP",
    ".NET",
    "XML",
    "HTML",
    "Javascript",
    "jQuery",
    "JSON",
    "Ajax",
    "C#",
    "ABC ALGOL",
    "ADA",
    "ABLE",
    "COBOL",
    "BLUE",
    "Pearl",
    "Python",
    "Oracle",
    "Haskell",
    "BASIC",
    "BeanShell",
    "Bliss",
    "BETA",
    "GOTRAN",
    "FORTRAN",
    "Focal",
    "Genie",
    "GOAL",
    "GROOVY",
    "JOSS",
    "JEAN",
    "JOVIAL",
    "JOY",
    "Maple",
    "MATLAB",
    "MORTAN",
    "MUMPS",
    "Miranda",
    "NetRexx",
    "NPL",
    "NXT-G"
);

$jsonData = array_filter( $languages, "filter" );

print( json_encode( $jsonData ) );



?>

票数 0

Stack Overflow用户

发布于 2014-08-05 01:37:04

在MySQL数据库中执行此命令；

CREATE TABLE `tag` (
  `id` int(20) NOT NULL auto_increment,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

INSERT INTO `tag` (`id`, `name`) VALUES
(1, 'php'),
(2, 'php frameword'),
(3, 'php tutorial'),
(4, 'jquery'),
(5, 'ajax'),
(6, 'mysql'),
(7, 'wordpress'),
(8, 'wordpress theme'),
(9, 'xml');

index.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Complete Input box</title>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
 $("#tag").autocomplete("autocomplete.php", {
        selectFirst: true
    });
});
</script>
</head>

<body>
    <label>Tag:</label>
    <input name="tag" type="text" id="tag" size="20"/>
</body>
</html>

autocomplete.php

<?php
    $q=$_GET['q'];
    $my_data=mysql_real_escape_string($q);
    $mysqli=mysqli_connect('localhost','root','','autofield') or die("Database Error");
    $sql="SELECT name FROM tag WHERE name LIKE '%$my_data%' ORDER BY name";
    $result = mysqli_query($mysqli,$sql) or die(mysqli_error());

    if($result)
    {
        while($row=mysqli_fetch_array($result))
        {
            echo $row['name']."\n";
        }
    }
?>

jquery.autocomplete.css

.ac_results {
    padding: 0px;
    border: 1px solid black;
    background-color: white;
    overflow: hidden;
    z-index: 99999;
}

.ac_results ul {
    width: 100%;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ac_results li {
    margin: 0px;
    padding: 2px 5px;
    cursor: default;
    display: block;
    /* 
    if width will be 100% horizontal scrollbar will apear 
    when scroll mode will be used
    */
    /*width: 100%;*/
    font: menu;
    font-size: 12px;
    /* 
    it is very important, if line-height not setted or setted 
    in relative units scroll will be broken in firefox
    */
    line-height: 16px;
    overflow: hidden;
}

.ac_loading {
    background: white url('indicator.gif') right center no-repeat;
}

.ac_odd {
    background-color: #eee;
}

.ac_over {
    background-color: #0A246A;
    color: white;
}

jquery.autocomplete.js

/*
 * jQuery Autocomplete plugin 1.1
 *
 * Copyright (c) 2009 Jörn Zaefferer
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: $Id: jquery.autocomplete.js 15 2009-08-22 10:30:27Z joern.zaefferer $
 */

;(function($) {

$.fn.extend({
    autocomplete: function(urlOrData, options) {
        var isUrl = typeof urlOrData == "string";
        options = $.extend({}, $.Autocompleter.defaults, {
            url: isUrl ? urlOrData : null,
            data: isUrl ? null : urlOrData,
            delay: isUrl ? $.Autocompleter.defaults.delay : 10,
            max: options && !options.scroll ? 10 : 150
        }, options);

        // if highlight is set to false, replace it with a do-nothing function
        options.highlight = options.highlight || function(value) { return value; };

        // if the formatMatch option is not specified, then use formatItem for backwards compatibility
        options.formatMatch = options.formatMatch || options.formatItem;

        return this.each(function() {
            new $.Autocompleter(this, options);
        });
    },
    result: function(handler) {
        return this.bind("result", handler);
    },
    search: function(handler) {
        return this.trigger("search", [handler]);
    },
    flushCache: function() {
        return this.trigger("flushCache");
    },
    setOptions: function(options){
        return this.trigger("setOptions", [options]);
    },
    unautocomplete: function() {
        return this.trigger("unautocomplete");
    }
});

$.Autocompleter = function(input, options) {

    var KEY = {
        UP: 38,
        DOWN: 40,
        DEL: 46,
        TAB: 9,
        RETURN: 13,
        ESC: 27,
        COMMA: 188,
        PAGEUP: 33,
        PAGEDOWN: 34,
        BACKSPACE: 8
    };

    // Create $ object for input element
    var $input = $(input).attr("autocomplete", "off").addClass(options.inputClass);

    var timeout;
    var previousValue = "";
    var cache = $.Autocompleter.Cache(options);
    var hasFocus = 0;
    var lastKeyPressCode;
    var config = {
        mouseDownOnSelect: false
    };
    var select = $.Autocompleter.Select(options, input, selectCurrent, config);

    var blockSubmit;

    // prevent form submit in opera when selecting with return key
    $.browser.opera && $(input.form).bind("submit.autocomplete", function() {
        if (blockSubmit) {
            blockSubmit = false;
            return false;
        }
    });

    // only opera doesn't trigger keydown multiple times while pressed, others don't work with keypress at all
    $input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {
        // a keypress means the input has focus
        // avoids issue where input had focus before the autocomplete was applied
        hasFocus = 1;
        // track last key pressed
        lastKeyPressCode = event.keyCode;
        switch(event.keyCode) {

            case KEY.UP:
                event.preventDefault();
                if ( select.visible() ) {
                    select.prev();
                } else {
                    onChange(0, true);
                }
                break;

            case KEY.DOWN:
                event.preventDefault();
                if ( select.visible() ) {
                    select.next();
                } else {
                    onChange(0, true);
                }
                break;

            case KEY.PAGEUP:
                event.preventDefault();
                if ( select.visible() ) {
                    select.pageUp();
                } else {
                    onChange(0, true);
                }
                break;

            case KEY.PAGEDOWN:
                event.preventDefault();
                if ( select.visible() ) {
                    select.pageDown();
                } else {
                    onChange(0, true);
                }
                break;

            // matches also semicolon
            case options.multiple && $.trim(options.multipleSeparator) == "," && KEY.COMMA:
            case KEY.TAB:
            case KEY.RETURN:
                if( selectCurrent() ) {
                    // stop default to prevent a form submit, Opera needs special handling
                    event.preventDefault();
                    blockSubmit = true;
                    return false;
                }
                break;

            case KEY.ESC:
                select.hide();
                break;

            default:
                clearTimeout(timeout);
                timeout = setTimeout(onChange, options.delay);
                break;
        }
    }).focus(function(){
        // track whether the field has focus, we shouldn't process any
        // results if the field no longer has focus
        hasFocus++;
    }).blur(function() {
        hasFocus = 0;
        if (!config.mouseDownOnSelect) {
            hideResults();
        }
    }).click(function() {
        // show select when clicking in a focused field
        if ( hasFocus++ > 1 && !select.visible() ) {
            onChange(0, true);
        }
    }).bind("search", function() {
        // TODO why not just specifying both arguments?
        var fn = (arguments.length > 1) ? arguments[1] : null;
        function findValueCallback(q, data) {
            var result;
            if( data && data.length ) {
                for (var i=0; i < data.length; i++) {
                    if( data[i].result.toLowerCase() == q.toLowerCase() ) {
                        result = data[i];
                        break;
                    }
                }
            }
            if( typeof fn == "function" ) fn(result);
            else $input.trigger("result", result && [result.data, result.value]);
        }
        $.each(trimWords($input.val()), function(i, value) {
            request(value, findValueCallback, findValueCallback);
        });
    }).bind("flushCache", function() {
        cache.flush();
    }).bind("setOptions", function() {
        $.extend(options, arguments[1]);
        // if we've updated the data, repopulate
        if ( "data" in arguments[1] )
            cache.populate();
    }).bind("unautocomplete", function() {
        select.unbind();
        $input.unbind();
        $(input.form).unbind(".autocomplete");
    });


    function selectCurrent() {
        var selected = select.selected();
        if( !selected )
            return false;

        var v = selected.result;
        previousValue = v;

        if ( options.multiple ) {
            var words = trimWords($input.val());
            if ( words.length > 1 ) {
                var seperator = options.multipleSeparator.length;
                var cursorAt = $(input).selection().start;
                var wordAt, progress = 0;
                $.each(words, function(i, word) {
                    progress += word.length;
                    if (cursorAt <= progress) {
                        wordAt = i;
                        return false;
                    }
                    progress += seperator;
                });
                words[wordAt] = v;
                // TODO this should set the cursor to the right position, but it gets overriden somewhere
                //$.Autocompleter.Selection(input, progress + seperator, progress + seperator);
                v = words.join( options.multipleSeparator );
            }
            v += options.multipleSeparator;
        }

        $input.val(v);
        hideResultsNow();
        $input.trigger("result", [selected.data, selected.value]);
        return true;
    }

    function onChange(crap, skipPrevCheck) {
        if( lastKeyPressCode == KEY.DEL ) {
            select.hide();
            return;
        }

        var currentValue = $input.val();

        if ( !skipPrevCheck && currentValue == previousValue )
            return;

        previousValue = currentValue;

        currentValue = lastWord(currentValue);
        if ( currentValue.length >= options.minChars) {
            $input.addClass(options.loadingClass);
            if (!options.matchCase)
                currentValue = currentValue.toLowerCase();
            request(currentValue, receiveData, hideResultsNow);
        } else {
            stopLoading();
            select.hide();
        }
    };

    function trimWords(value) {
        if (!value)
            return [""];
        if (!options.multiple)
            return [$.trim(value)];
        return $.map(value.split(options.multipleSeparator), function(word) {
            return $.trim(value).length ? $.trim(word) : null;
        });
    }

    function lastWord(value) {
        if ( !options.multiple )
            return value;
        var words = trimWords(value);
        if (words.length == 1) 
            return words[0];
        var cursorAt = $(input).selection().start;
        if (cursorAt == value.length) {
            words = trimWords(value)
        } else {
            words = trimWords(value.replace(value.substring(cursorAt), ""));
        }
        return words[words.length - 1];
    }

    // fills in the input box w/the first match (assumed to be the best match)
    // q: the term entered
    // sValue: the first matching result
    function autoFill(q, sValue){
        // autofill in the complete box w/the first match as long as the user hasn't entered in more data
        // if the last user key pressed was backspace, don't autofill
        if( options.autoFill && (lastWord($input.val()).toLowerCase() == q.toLowerCase()) && lastKeyPressCode != KEY.BACKSPACE ) {
            // fill in the value (keep the case the user has typed)
            $input.val($input.val() + sValue.substring(lastWord(previousValue).length));
            // select the portion of the value not typed by the user (so the next character will erase)
            $(input).selection(previousValue.length, previousValue.length + sValue.length);
        }
    };

    function hideResults() {
        clearTimeout(timeout);
        timeout = setTimeout(hideResultsNow, 200);
    };

    function hideResultsNow() {
        var wasVisible = select.visible();
        select.hide();
        clearTimeout(timeout);
        stopLoading();
        if (options.mustMatch) {
            // call search and run callback
            $input.search(
                function (result){
                    // if no value found, clear the input box
                    if( !result ) {
                        if (options.multiple) {
                            var words = trimWords($input.val()).slice(0, -1);
                            $input.val( words.join(options.multipleSeparator) + (words.length ? options.multipleSeparator : "") );
                        }
                        else {
                            $input.val( "" );
                            $input.trigger("result", null);
                        }
                    }
                }
            );
        }
    };

    function receiveData(q, data) {
        if ( data && data.length && hasFocus ) {
            stopLoading();
            select.display(data, q);
            autoFill(q, data[0].value);
            select.show();
        } else {
            hideResultsNow();
        }
    };

    function request(term, success, failure) {
        if (!options.matchCase)
            term = term.toLowerCase();
        var data = cache.load(term);
        // recieve the cached data
        if (data && data.length) {
            success(term, data);
        // if an AJAX url has been supplied, try loading the data now
        } else if( (typeof options.url == "string") && (options.url.length > 0) ){

            var extraParams = {
                timestamp: +new Date()
            };
            $.each(options.extraParams, function(key, param) {
                extraParams[key] = typeof param == "function" ? param() : param;
            });

            $.ajax({
                // try to leverage ajaxQueue plugin to abort previous requests
                mode: "abort",
                // limit abortion to this input
                port: "autocomplete" + input.name,
                dataType: options.dataType,
                url: options.url,
                data: $.extend({
                    q: lastWord(term),
                    limit: options.max
                }, extraParams),
                success: function(data) {
                    var parsed = options.parse && options.parse(data) || parse(data);
                    cache.add(term, parsed);
                    success(term, parsed);
                }
            });
        } else {
            // if we have a failure, we need to empty the list -- this prevents the the [TAB] key from selecting the last successful match
            select.emptyList();
            failure(term);
        }
    };

    function parse(data) {
        var parsed = [];
        var rows = data.split("\n");
        for (var i=0; i < rows.length; i++) {
            var row = $.trim(rows[i]);
            if (row) {
                row = row.split("|");
                parsed[parsed.length] = {
                    data: row,
                    value: row[0],
                    result: options.formatResult && options.formatResult(row, row[0]) || row[0]
                };
            }
        }
        return parsed;
    };

    function stopLoading() {
        $input.removeClass(options.loadingClass);
    };

};

$.Autocompleter.defaults = {
    inputClass: "ac_input",
    resultsClass: "ac_results",
    loadingClass: "ac_loading",
    minChars: 1,
    delay: 400,
    matchCase: false,
    matchSubset: true,
    matchContains: false,
    cacheLength: 10,
    max: 100,
    mustMatch: false,
    extraParams: {},
    selectFirst: true,
    formatItem: function(row) { return row[0]; },
    formatMatch: null,
    autoFill: false,
    width: 0,
    multiple: false,
    multipleSeparator: ", ",
    highlight: function(value, term) {
        return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
    },
    scroll: true,
    scrollHeight: 180
};

$.Autocompleter.Cache = function(options) {

    var data = {};
    var length = 0;

    function matchSubset(s, sub) {
        if (!options.matchCase) 
            s = s.toLowerCase();
        var i = s.indexOf(sub);
        if (options.matchContains == "word"){
            i = s.toLowerCase().search("\\b" + sub.toLowerCase());
        }
        if (i == -1) return false;
        return i == 0 || options.matchContains;
    };

    function add(q, value) {
        if (length > options.cacheLength){
            flush();
        }
        if (!data[q]){ 
            length++;
        }
        data[q] = value;
    }

    function populate(){
        if( !options.data ) return false;
        // track the matches
        var stMatchSets = {},
            nullData = 0;

        // no url was specified, we need to adjust the cache length to make sure it fits the local data store
        if( !options.url ) options.cacheLength = 1;

        // track all options for minChars = 0
        stMatchSets[""] = [];

        // loop through the array and create a lookup structure
        for ( var i = 0, ol = options.data.length; i < ol; i++ ) {
            var rawValue = options.data[i];
            // if rawValue is a string, make an array otherwise just reference the array
            rawValue = (typeof rawValue == "string") ? [rawValue] : rawValue;

            var value = options.formatMatch(rawValue, i+1, options.data.length);
            if ( value === false )
                continue;

            var firstChar = value.charAt(0).toLowerCase();
            // if no lookup array for this character exists, look it up now
            if( !stMatchSets[firstChar] ) 
                stMatchSets[firstChar] = [];

            // if the match is a string
            var row = {
                value: value,
                data: rawValue,
                result: options.formatResult && options.formatResult(rawValue) || value
            };

            // push the current match into the set list
            stMatchSets[firstChar].push(row);

            // keep track of minChars zero items
            if ( nullData++ < options.max ) {
                stMatchSets[""].push(row);
            }
        };

        // add the data items to the cache
        $.each(stMatchSets, function(i, value) {
            // increase the cache size
            options.cacheLength++;
            // add to the cache
            add(i, value);
        });
    }

    // populate any existing data
    setTimeout(populate, 25);

    function flush(){
        data = {};
        length = 0;
    }

    return {
        flush: flush,
        add: add,
        populate: populate,
        load: function(q) {
            if (!options.cacheLength || !length)
                return null;
            /* 
             * if dealing w/local data and matchContains than we must make sure
             * to loop through all the data collections looking for matches
             */
            if( !options.url && options.matchContains ){
                // track all matches
                var csub = [];
                // loop through all the data grids for matches
                for( var k in data ){
                    // don't search through the stMatchSets[""] (minChars: 0) cache
                    // this prevents duplicates
                    if( k.length > 0 ){
                        var c = data[k];
                        $.each(c, function(i, x) {
                            // if we've got a match, add it to the array
                            if (matchSubset(x.value, q)) {
                                csub.push(x);
                            }
                        });
                    }
                }               
                return csub;
            } else 
            // if the exact item exists, use it
            if (data[q]){
                return data[q];
            } else
            if (options.matchSubset) {
                for (var i = q.length - 1; i >= options.minChars; i--) {
                    var c = data[q.substr(0, i)];
                    if (c) {
                        var csub = [];
                        $.each(c, function(i, x) {
                            if (matchSubset(x.value, q)) {
                                csub[csub.length] = x;
                            }
                        });
                        return csub;
                    }
                }
            }
            return null;
        }
    };
};

$.Autocompleter.Select = function (options, input, select, config) {
    var CLASSES = {
        ACTIVE: "ac_over"
    };

    var listItems,
        active = -1,
        data,
        term = "",
        needsInit = true,
        element,
        list;

    // Create results
    function init() {
        if (!needsInit)
            return;
        element = $("<div/>")
        .hide()
        .addClass(options.resultsClass)
        .css("position", "absolute")
        .appendTo(document.body);

        list = $("<ul/>").appendTo(element).mouseover( function(event) {
            if(target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI') {
                active = $("li", list).removeClass(CLASSES.ACTIVE).index(target(event));
                $(target(event)).addClass(CLASSES.ACTIVE);            
            }
        }).click(function(event) {
            $(target(event)).addClass(CLASSES.ACTIVE);
            select();
            // TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus
            input.focus();
            return false;
        }).mousedown(function() {
            config.mouseDownOnSelect = true;
        }).mouseup(function() {
            config.mouseDownOnSelect = false;
        });

        if( options.width > 0 )
            element.css("width", options.width);

        needsInit = false;
    } 

    function target(event) {
        var element = event.target;
        while(element && element.tagName != "LI")
            element = element.parentNode;
        // more fun with IE, sometimes event.target is empty, just ignore it then
        if(!element)
            return [];
        return element;
    }

    function moveSelect(step) {
        listItems.slice(active, active + 1).removeClass(CLASSES.ACTIVE);
        movePosition(step);
        var activeItem = listItems.slice(active, active + 1).addClass(CLASSES.ACTIVE);
        if(options.scroll) {
            var offset = 0;
            listItems.slice(0, active).each(function() {
                offset += this.offsetHeight;
            });
            if((offset + activeItem[0].offsetHeight - list.scrollTop()) > list[0].clientHeight) {
                list.scrollTop(offset + activeItem[0].offsetHeight - list.innerHeight());
            } else if(offset < list.scrollTop()) {
                list.scrollTop(offset);
            }
        }
    };

    function movePosition(step) {
        active += step;
        if (active < 0) {
            active = listItems.size() - 1;
        } else if (active >= listItems.size()) {
            active = 0;
        }
    }

    function limitNumberOfItems(available) {
        return options.max && options.max < available
            ? options.max
            : available;
    }

    function fillList() {
        list.empty();
        var max = limitNumberOfItems(data.length);
        for (var i=0; i < max; i++) {
            if (!data[i])
                continue;
            var formatted = options.formatItem(data[i].data, i+1, max, data[i].value, term);
            if ( formatted === false )
                continue;
            var li = $("<li/>").html( options.highlight(formatted, term) ).addClass(i%2 == 0 ? "ac_even" : "ac_odd").appendTo(list)[0];
            $.data(li, "ac_data", data[i]);
        }
        listItems = list.find("li");
        if ( options.selectFirst ) {
            listItems.slice(0, 1).addClass(CLASSES.ACTIVE);
            active = 0;
        }
        // apply bgiframe if available
        if ( $.fn.bgiframe )
            list.bgiframe();
    }

    return {
        display: function(d, q) {
            init();
            data = d;
            term = q;
            fillList();
        },
        next: function() {
            moveSelect(1);
        },
        prev: function() {
            moveSelect(-1);
        },
        pageUp: function() {
            if (active != 0 && active - 8 < 0) {
                moveSelect( -active );
            } else {
                moveSelect(-8);
            }
        },
        pageDown: function() {
            if (active != listItems.size() - 1 && active + 8 > listItems.size()) {
                moveSelect( listItems.size() - 1 - active );
            } else {
                moveSelect(8);
            }
        },
        hide: function() {
            element && element.hide();
            listItems && listItems.removeClass(CLASSES.ACTIVE);
            active = -1;
        },
        visible : function() {
            return element && element.is(":visible");
        },
        current: function() {
            return this.visible() && (listItems.filter("." + CLASSES.ACTIVE)[0] || options.selectFirst && listItems[0]);
        },
        show: function() {
            var offset = $(input).offset();
            element.css({
                width: typeof options.width == "string" || options.width > 0 ? options.width : $(input).width(),
                top: offset.top + input.offsetHeight,
                left: offset.left
            }).show();
            if(options.scroll) {
                list.scrollTop(0);
                list.css({
                    maxHeight: options.scrollHeight,
                    overflow: 'auto'
                });

                if($.browser.msie && typeof document.body.style.maxHeight === "undefined") {
                    var listHeight = 0;
                    listItems.each(function() {
                        listHeight += this.offsetHeight;
                    });
                    var scrollbarsVisible = listHeight > options.scrollHeight;
                    list.css('height', scrollbarsVisible ? options.scrollHeight : listHeight );
                    if (!scrollbarsVisible) {
                        // IE doesn't recalculate width when scrollbar disappears
                        listItems.width( list.width() - parseInt(listItems.css("padding-left")) - parseInt(listItems.css("padding-right")) );
                    }
                }

            }
        },
        selected: function() {
            var selected = listItems && listItems.filter("." + CLASSES.ACTIVE).removeClass(CLASSES.ACTIVE);
            return selected && selected.length && $.data(selected[0], "ac_data");
        },
        emptyList: function (){
            list && list.empty();
        },
        unbind: function() {
            element && element.remove();
        }
    };
};

$.fn.selection = function(start, end) {
    if (start !== undefined) {
        return this.each(function() {
            if( this.createTextRange ){
                var selRange = this.createTextRange();
                if (end === undefined || start == end) {
                    selRange.move("character", start);
                    selRange.select();
                } else {
                    selRange.collapse(true);
                    selRange.moveStart("character", start);
                    selRange.moveEnd("character", end);
                    selRange.select();
                }
            } else if( this.setSelectionRange ){
                this.setSelectionRange(start, end);
            } else if( this.selectionStart ){
                this.selectionStart = start;
                this.selectionEnd = end;
            }
        });
    }
    var field = this[0];
    if ( field.createTextRange ) {
        var range = document.selection.createRange(),
            orig = field.value,
            teststring = "<->",
            textLength = range.text.length;
        range.text = teststring;
        var caretAt = field.value.indexOf(teststring);
        field.value = orig;
        this.selection(caretAt, caretAt + textLength);
        return {
            start: caretAt,
            end: caretAt + textLength
        }
    } else if( field.selectionStart !== undefined ){
        return {
            start: field.selectionStart,
            end: field.selectionEnd
        }
    }
};

})(jQuery);

下载jquery.min.js并将其重命名为jquery.js

现在在本地主机/服务器中打开index.php并对其进行测试。在你的词汇表中遵循类似的方法。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25123443

复制

相似问题

问自动完成文本框从数据库中提取建议？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动完成文本框从数据库中提取建议？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动完成文本框从数据库中提取建议？
EN