使用带有 Knockout js 的 Jquery 自动完成

Question

我正在尝试使用 jquery 进行自动补全。

我正在使用可编辑网格。像这样 我试图在没有淘汰 js 代码的情况下实现自动完成。它工作正常。 [我的代码没有淘汰js代码][http://jsfiddle.net/bhagirathip/WC5P7/2/]

然后我尝试使用淘汰赛 js 实现自动完成。现在它适用于第一个文本框。 如果我通过单击 AddMore 按钮添加更多文本框，则自动完成功能不起作用。 [我的代码：][http://jsfiddle.net/bhagirathip/x6H8s/6/]

当我尝试在没有 KnockOut js 查询的情况下进行自动完成时，它工作正常，但是当我包含敲除 js 查询时，自动完成无法正常工作。

请找出我在哪里做错了。

提前致谢

Answer 1

Solution jsfiddler

实际上，您并没有使用新添加的测试框添加自动完成事件 即它不工作

    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js" type="text/javascript">
    </script>
<div class='liveExample'>
        <p>You have asked for <span data-bind='text: gifts().length'>&nbsp;</span> gift(s)</p>
        <table data-bind='visible: gifts().length > 0'>
            <thead>
                <tr>
                    <th>Gift name</th>
                    <th>Price</th>
                    <th />
                </tr>
            </thead>
            <tbody data-bind='foreach: gifts'>
                <tr>
                    <td>
                        <input data-bind='value: name' class='tags' /></td>
                    <td>
                        <input data-bind='value: price' /></td>
                    <td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td>
                </tr>
            </tbody>
        </table>
        <button data-bind='click: addGift'>Add Gift</button>
        <button data-bind='enable: gifts().length > 0' type='submit'>Submit</button>
    </div>​

脚本就像

//For autocomplete extender genarting members

    var GiftModel = function (gifts) {
        var self = this;
        self.gifts = ko.observableArray(gifts);

        self.addGift = function () {
            self.gifts.push({
                name: "",
                price: ""
            });
            var availableTags2 = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
            $(".tags").autocomplete({
                source: availableTags2
            });            

        };

        self.removeGift = function (gift) {
            self.gifts.remove(gift);
        };           
    };

    var viewModel = new GiftModel([
        { name: "", price: "" }
    ]);

    $(document).ready(function () {
        ko.applyBindings(viewModel);

          var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $(".tags").autocomplete({
            source: availableTags
        });
    });​

下面是对服务器进行的示例 ajax 调用，在完成该调用后，您可以在客户端分配变量，确保变量是全局变量，以便您可以在不同函数之间访问它

    function getResult() {
        var URL = "/Home/GetResult";
        var typeJSON = {};
        typeJSON["sql"] = $("#sqltext").val();
        $.ajax({
            type: "POST",
            url: URL,
            data: typeJSON,//data to be send to server
//omit above data tag if not required to send data to server

            success: function (data) {
//on success you can assign your variable here

            },
            failure: function (data) {
                //on faliure of ajax call can show some message here
            }
        });
    }

Answer 2

你可以做一件事：

$(function(){

 $.noConflict();

//put all other code here

});