且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用jQuery的UI自动完成与多个输入字段

更新时间:2023-10-05 11:20:16

不知道确切的HTML,并传递给自动完成源对象的数组,就很难让你code准确。

但是,你问自动完成的工作多个字段,所以这里只是一个简单的例子:

HTML

 <输入ID =search_ctO级=autoc类型=文本名称=search_ct []/>
<输入ID =search_ct1级=autoc类型=文本名称=search_ct []/>
<输入ID =search_ct2级=autoc类型=文本名称=search_ct []/>
<输入ID =search_ctn级=autoc类型=文本名称=search_ct []/>

JS

  VAR标签=ABC,高清,XYZ];
$('。autoc')。在(焦点访谈,函数(){
      $(本).autocomplete({
       的minLength:2,
       来源:标签
        });
});

的jsfiddle演示

如果有你想要的任何其他东西被列入答案,随意评论。

修改

您code,

  $('。autoc')。在(焦点访谈,函数(){
    $(本).autocomplete({
        的minLength:2,
        来源:liste_contact.php',
        选择:函数(事件,UI){
            $('autoc #search_ct。')VAL(ui.item.label)。
            $(autoc #contact_id。)VAL(ui.item.value)。
            $(autoc #contact_description)VAL(ui.item.desc)。
            返回false;
        },
        变化:功能(){
            。VAR Servi大街= $(#service_id为)VAL();
            。VAR跳= $('#跳')VAL();
            VAR触点= $(#CONTACT_ID).VAL();
            $阿贾克斯({
                网址:'ajout_contact.php',
                数据:SERV =+ Servi大街+&放大器; hopit =+跳+&放大器;联系=+联系方式+
                成功:函数(){
                    $(#search_ct)VAL('')。
                }
            });
        }
    });
});

good afternoon all!

i spared a lot of time, read all posts on ***... and i am not able to make autocomplete working with multilpe input fields. I tried to attrib a 'autoc' class to each input, i use a different id for each field (in fact the inedx of the php loop generating fields). I do not ask someone to do the job for me.... just a working example.

Thanks in advance.

PS : I apologize for my poor english...

now follows a piece of html :

    <input id="search_ctO" class="autoc" type="text" name="search_ct[]">
    <input id="search_ct1" class="autoc" type="text" name="search_ct[]">
    <input id="search_ct2" class="autoc" type="text" name="search_ct[]">
    ....
    <input id="search_ctn" class="autoc" type="text" name="search_ct[]">

and jquery :

    $('.autoc').on("focus", function()   
      $(this).autocomplete({
       minLength: 2,
       source: 'liste_contact.php',
       select: function( event, ui ) {  
         $('.autoc #search_ct').val( ui.item.label ); //id="search_ct'.$i.'
         $(".autoc #contact_id").val( ui.item.value ); //
         $("autoc #contact_description").val( ui.item.desc );
         return false;
       },  
      change: function(){ 
         var servi = $("#service_id").val();
         var hop = $('#hop').val();
         var contact = $("#contact_id" ).val();
         $.ajax({
           url: 'ajout_contact.php',
           data: "serv="+ servi+"&hopit=" + hop+"&contact="+ contact+"",// on envoie la requete d'ajout de contact

         success: function() {
               $("#search_ct").val('');
               // location.reload(true);         
       }

Without knowing the exact HTML and the object array passed to autocomplete source, it is difficult to make your code exactly.

However, you have asked about working of autocomplete for multiple fields, so here is just a simple example:

HTML

<input id="search_ctO" class="autoc" type="text" name="search_ct[]"/>
<input id="search_ct1" class="autoc" type="text" name="search_ct[]"/>
<input id="search_ct2" class="autoc" type="text" name="search_ct[]"/>
<input id="search_ctn" class="autoc" type="text" name="search_ct[]"/>

JS

var tags = ["abc","def","xyz"];
$('.autoc').on("focus", function(){
      $(this).autocomplete({
       minLength: 2,
       source: tags
        });
});

JSFIDDLE DEMO

If there is any other thing you want to be included in answer, feel free to comment.

EDIT

Your code,

$('.autoc').on("focus", function() {
    $(this).autocomplete({
        minLength: 2,
        source: 'liste_contact.php',
        select: function( event, ui ) {  
            $('.autoc #search_ct').val( ui.item.label );
            $(".autoc #contact_id").val( ui.item.value );
            $("autoc #contact_description").val( ui.item.desc );
            return false;
        },  
        change: function() { 
            var servi = $("#service_id").val();
            var hop = $('#hop').val();
            var contact = $("#contact_id" ).val();
            $.ajax({
                url: 'ajout_contact.php',
                data: "serv="+servi+"&hopit="+hop+"&contact="+contact+"",
                success: function() {
                    $("#search_ct").val('');        
                }
            });
        }
    });
});