2016-01-19 66 views
0

我想從顯示的html表中的第一列自動完成,以返回列類別中的兩個輸入字段值中的任何一個,但是我的自動完成未返回任何值。從html表格列中的輸入值的Jquery自動完成

我已經創建了一個列類別的數組,但它似乎沒有在數組中挑選任何東西。

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

回答

0

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

源:https://jqueryui.com/autocomplete/