Jquery UI 自动完成多个不适用于 Web Sql

Question

我只想创建 jquery 自动完成多个网络 sql 意味着有一些标签存储在本地网络 sql 数据库中，我想从网络生成一个列表sql 数据库。我试过这段代码，

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript">

            $( document ).ready(function() {
                //create a database
                var db = openDatabase('tmp', '1.0', 'Tmp tabel', 10 * 1024 * 1024);
                db.transaction(function (tx) {
                    tx.executeSql('CREATE TABLE IF NOT EXISTS tmp (id BIGINT PRIMARY KEY unique, tag VARCHAR)');
                    tx.executeSql('INSERT INTO tmp (id, tag) VALUES (1,"foobar")');
                    tx.executeSql('INSERT INTO tmp (id, tag) VALUES (2,"logmsg")');
                    tx.executeSql('INSERT INTO tmp (id, tag) VALUES (3,"some name")');
                });

                var getTag = function(tag, successCallback){
                    db.transaction(function(transaction){
                        transaction.executeSql('SELECT * FROM tmp WHERE (tag LIKE ?)', ["%"+tag+"%"],
                        function(transaction, results){successCallback(results);}, errCallback);
                    });
                };



                $(document).on("keypress", "#tags", function(e) {
                    var tagValue = $(this).val();
                    getTag(tagValue, generateList);
                });// end of submit button click



                var generateList = function(results){
                    var tagValue = $("#tags").val();
                    var allFields = [];
                    var rows = results.rows;
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows.item(i);
                        allFields.push(row.tag);
                    }

                    $("#tags").on( "keydown", function( event ) {
                        if ( event.keyCode === $.ui.keyCode.TAB &&
                            $( this ).autocomplete("instance").menu.active ) {
                          event.preventDefault();
                        }
                      }).autocomplete({
                        minLength: 0,
                        source: function( request, response ) {
                          // delegate back to autocomplete, but extract the last term
                          response( $.ui.autocomplete.filter(
                            allFields, extractLast( request.term ) ) );
                        },
                        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;
                        }
                    });

                };//end of generate list


                // Generic error callback
                var errCallback = function(){
                  alert("show some error!");
                }

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

            });// end of document load




        </script>
   </head>

   <body>
    <div class="ui-widget">
        <form action="test.php>
            <label for="tags">Tags: </label>
            <input id="tags">
            <input type="submit" id="submit">
        </form>
    </div>

   </body>

</html>

它显示了列表，但是当我按 space 时没有显示列表。

Answer 1

我已经解决了这个问题。由于数据库executeSql是异步调用所以我必须设置回调。

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript">

            $( document ).ready(function() {
                //create a database
                var db = openDatabase('tmp', '1.0', 'Tmp tabel', 10 * 1024 * 1024);
                db.transaction(function (tx) {
                    tx.executeSql('CREATE TABLE IF NOT EXISTS tmp (id BIGINT PRIMARY KEY unique, tag VARCHAR)');
                    tx.executeSql('INSERT INTO tmp (id, tag) VALUES (1,"foobar")');
                    tx.executeSql('INSERT INTO tmp (id, tag) VALUES (2,"logmsg")');
                    tx.executeSql('INSERT INTO tmp (id, tag) VALUES (3,"some name")');
                });

                var getTag = function(tag, successCallback){
                    var allFields = [];
                    db.transaction(function(transaction){
                        transaction.executeSql('SELECT * FROM tmp WHERE (tag LIKE ?)', ["%"+tag+"%"],
                        function(transaction, results){
                            var rows = results.rows;
                            for (var i = 0; i < rows.length; i++) {
                                var row = rows.item(i);
                                allFields.push(row.tag);
                            }
                            successCallback(allFields);
                        }, 
                        errCallback);
                    });
                };


                // submit button click handler
                $(document).on("keypress", "#tags", function(e) {
                    $(this).on( "keydown", function( event ) {
                        if ( event.keyCode === $.ui.keyCode.TAB &&
                            $( this ).autocomplete("instance").menu.active ) {
                          event.preventDefault();
                        }
                      }).autocomplete({
                        minLength: 0,
                         source: function(request, callback){
                            var searchParam  = request.term;
                            init(searchParam, callback)
                        },
                        source: function( request, successCallback ) {
                            var searchParam  = extractLast( request.term );
                            getTag(searchParam, successCallback)
                        },
                        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;
                        }
                    });

                });// end of submit button click



                // Generic error callback
                var errCallback = function(){
                  alert("show some error!");
                }

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

            });// end of document load




        </script>
   </head>

   <body>
    <div class="ui-widget">
        <form action="test.php>
            <label for="tags">Tags: </label>
            <input id="tags">
            <input type="submit" id="submit">
        </form>
    </div>

   </body>

</html>

Jquery UI 自动完成多个不适用于 Web Sql

Jquery UI auto complete multiple not working with Web Sql

jquery

jquery-ui-autocomplete

web-sql