通过第一个输入标记进行自动完成输入

问题描述：

上的第一个是与autocomlete标签的输入：

HTML：

<h3>Type in the name of your favorite programming language!</h3> 
<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input id="tags"/> 
</div>

JS：

$(document).ready(function() { 
    var languages = ["Ada", "Java", "LISP", "Javascript", "PHP", "C", "C++", "Visual Basic", "HTML", "CSS", "JQuery"]; 
    $("#tags").autocomplete({ 
    source: languages 
    }); 
});

第二是自动填充通过选项选择3个输入：

http://jsfiddle.net/zunrk/

我希望最终结果是前4个输入，第一个是通过标记自动完成，当您选择一个标记而不是自动填充基于相同连接的其他输入时

谢谢。

答

在这里，你去了一个解决方案http://jsfiddle.net/zunrk/309/

var ids = new Array(); 
 
var use = new Array(); 
 
var ful = new Array(); 
 

 
ids[0] = "6"; 
 
use[0] = "bsmith"; 
 
ful[0] = "Buddy Smith"; 
 

 
ids[1] = "2"; 
 
use[1] = "lsmith"; 
 
ful[1] = "Libbie Smith"; 
 

 
ids[2] = "4"; 
 
use[2] = "asmith"; 
 
ful[2] = "Andy Smith"; 
 

 

 
function Choice(autoEle) { 
 
    if(autoEle === 'use') { 
 
    selectedIndex = use.indexOf($('#use').val()); 
 
    } else if(autoEle === 'ful') { 
 
    \t selectedIndex = ful.indexOf($('#ful').val()); 
 
    } else { 
 
    \t selectedIndex = ids.indexOf($('#ids').val()); 
 
    } 
 
    
 

 
    document.getElementById("ids").value = ids[selectedIndex]; 
 
    document.getElementById("use").value = use[selectedIndex]; 
 
    document.getElementById("ful").value = ful[selectedIndex]; 
 
} 
 

 
$("#use").autocomplete({ 
 
    source: use, 
 
    select: function(){ 
 
    $('#selectUsers option[value="' + (use.indexOf($('#use').val()) + 1) + '"]').attr('selected','selected'); 
 
    Choice('use'); 
 
    } 
 
}); 
 
     
 
$("#ids").autocomplete({ 
 
    source: ids, 
 
    select: function(){ 
 
    $('#selectUsers option[value="' + (ids.indexOf($('#ids').val()) + 1) + '"]').attr('selected','selected'); 
 
    Choice('ids'); 
 
    } 
 
}); 
 
     
 
$("#ful").autocomplete({ 
 
    source: ful, 
 
    select: function(){ 
 
    $('#selectUsers option[value="' + (ful.indexOf($('#ful').val()) + 1) + '"]').attr('selected','selected'); 
 
    Choice('ful'); 
 
    } 
 
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<form name="form1" method="post" action=""> 
 
    <p>ids <input type="text" id="ids" name="id" ></p> 
 
    <p>use <input type="text" id="use" name="username" ></p> 
 
    <p>ful <input type="text" id="ful" name="full_name" ></p> 
 
</form>

希望这会帮助你。

@DigiNetEvents我已经更新了答案，看看吧 – Shiladitya

工作很好，谢谢 –

@DigiNetEvents欢迎伙伴:) – Shiladitya

答

我需要改变选择标签输入标签是这样的：

<form name="form1" method="post" action=""> 
    <input id="selectUsers" name="users" onChange='Choice("", "");'> 
<p>ids <input type="text" id="ids" name="id" ></p> 
<p>use <input type="text" id="use" name="username" ></p> 
<p>ful <input type="text" id="ful" name="full_name" ></p> 
</form>

，但它不会工作，因为我需要的值在输入文本。

答

我“米试图将名字从1更改为‘nesya’，我也得到‘未定义’的其他投入，这是代码：

<body> 
    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<form name="form1" method="post" action=""> 
    <p>ids <input type="text" id="ids" name="id" class="ui-autocomplete-input" autocomplete="off"></p> 
    <p>use <input type="text" id="use" name="username" class="ui-autocomplete-input" autocomplete="off"></p> 
    <p>ful <input type="text" id="ful" name="full_name" class="ui-autocomplete-input" autocomplete="off"></p> 
</form> 

<script type="text/javascript">//<![CDATA[ 

var ids = new Array(); 
var use = new Array(); 
var ful = new Array(); 

ids[0] = "nesya"; 
use[0] = "aaa"; 
ful[0] = "text1"; 

ids[1] = "2"; 
use[1] = "bbb"; 
ful[1] = "text2"; 

ids[2] = "3"; 
use[2] = "ccc"; 
ful[2] = "text3"; 


function Choice(autoEle) { 
    if(autoEle === 'use') { 
    selectedIndex = use.indexOf($('#use').val()); 
    } else if(autoEle === 'ful') { 
    selectedIndex = ful.indexOf($('#ful').val()); 
    } else { 
    selectedIndex = ids.indexOf($('#ids').val()); 
    } 


    document.getElementById("ids").value = ids[selectedIndex]; 
    document.getElementById("use").value = use[selectedIndex]; 
    document.getElementById("ful").value = ful[selectedIndex]; 
} 

$("#use").autocomplete({ 
    source: use, 
    select: function(){ 
    $('#selectUsers option[value="' + (use.indexOf($('#use').val()) + 1) + '"]').attr('selected','selected'); 
    Choice('use'); 
    } 
}); 

$("#ids").autocomplete({ 
    source: ids, 
    select: function(){ 
    $('#selectUsers option[value="' + (ids.indexOf($('#ids').val()) + 1) + '"]').attr('selected','selected'); 
    Choice('ids'); 
    } 
}); 

$("#ful").autocomplete({ 
    source: ful, 
    select: function(){ 
    $('#selectUsers option[value="' + (ful.indexOf($('#ful').val()) + 1) + '"]').attr('selected','selected'); 
    Choice('ful'); 
    } 
}); 
//]]> 

</script> 

</body>

通过第一个输入标记进行自动完成输入

相关推荐