AutoComplete using Jquery With Knockout js

Question

I am trying to do autocoplete using jquery.

I am using Editable Grid.Like this I tried to implement autocomplete without knockout js code .Its working fine. [My Code without knockout js code][http://jsfiddle.net/bhagirathip/WC5P7/2/]

Then I tried to implement autocomplete with the knockout js.Now its wokring for 1st textbox. If i add more textbox by clicking AddMore button then autocomplete is not working. [My Code :][http://jsfiddle.net/bhagirathip/x6H8s/6/]

when I tried to do autocomplete without KnockOut js queries it working fine but when i am including the knockout js query then autocomplete is not working .

Please figure out where I have done mistake.

Thanks in advance

possible duplicate of [AutoComplete in Jquery using knockout js](http://stackoverflow.com/questions/13120109/autocomplete-in-jquery-using-knockout-js) — nemesv, Oct 30 '12 at 08:45
No both are different question. there i have used ajax call and here i am using static one no ajax call. — bhagirathi, Oct 30 '12 at 09:00

Vijay Parmar · Accepted Answer · 2012-11-05T08:02:00.840

Solution jsfiddler

Actually you were not adding the autocomplete event with newly added testboxes i.e. it was not working

    <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>

and script is like

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

below is a sample ajax call made to server ,on complishion of that one you can assign your variable at client side,make sure tthe variable is global so you can access it between different functions

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

Thanks Vijay I want to fetch the data from server and store the data in the availableTags. how to do this. please help — bhagirathi, Oct 30 '12 at 10:44
hi @bhagirathi i have added a getresult() with ajax call to server url,you may use it to make server call — Vijay Parmar, Nov 05 '12 at 08:08

Jai · Answer 2 · 2012-10-30T08:52:19.583

0

You can do one thing:

$(function(){

 $.noConflict();

//put all other code here

});

edited Oct 30 '12 at 08:52

answered Oct 30 '12 at 08:47

Jai

74,255
12
74
103

just after $(document).ready(function(){ $.noConflict(); // then all your code}); – Jai Oct 30 '12 at 09:04

AutoComplete using Jquery With Knockout js

2 Answers2