CODEWITHSUNDEEP
jqueryhtmlautocomplete
Jayson Herbert
Jayson Herbert

Reputation: 11

Jquery Autocomplete from input value in html table column

I am trying to autocomplete from the first column in the shown html table to return either of the two input field values in column category, but my autocomplete is not returning any values.

I have created an array of column category but it doesn't seem to be picking anything up in the array.

Table Image

https://jsfiddle.net/Jaysonh1985/aLc29vtt/

<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
    <thead>
        <tr>
            <th>Category</th>
            <th>Function</th>
            <th>Name</th>
            <th>Parameter</th>
            <th>Output</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> <input name="Category" type="text" value="Input" class="form-control" /> </td>
            <td> <input name="Function" type="text" value="Add" class="form-control" /> </td>
            <td> <input name="Name" type="text" value="" class="form-control" /> </td>
            <td> <input name="Parameter" type="text" value="" class="form-control" /> </td>
            <td> <input name ="Output" type="text" value="" class="form-control" /> </td>
            <td>
                <span class="table-remove glyphicon glyphicon-remove"></span>
            </td>
            <td>
                <span class="table-up glyphicon glyphicon-arrow-up"></span>
                <span class="table-down glyphicon glyphicon-arrow-down"></span>
            </td>
        </tr>


$(function()
{
var arrLinks = $('#table td:input td:nth-child(1)').map(function () {
    return $(this).val();
}).get();
$('input[name=Name]').autocomplete({
    source: arrLinks,
    create: function () {
        $(this).data("item.autocomplete", item)._renderItem = arrLinks;
    }
})
})

Upvotes: 0

Views: 2798

Answers (1)

Mohammed Akdim
Mohammed Akdim

Reputation: 2401

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
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
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>

source : https://jqueryui.com/autocomplete/

Upvotes: 1

Related Questions