自动填充文本框，其中多个值由句号和元素分隔 [英] Autocomplete textbox with multiple values separated by full stop and elements

问题描述

您好我正在尝试开发一个自动完成文本框，其中多个值以句号分隔，下面的元素是我的代码。

 <   script  >  
 $（ function （）{
  var  availableTags = [
   Electronics，
  < span class =code-string> Motors，
   Cloths 
 
]; 
  var  Electronics = [
  笔记本电脑，
  手机 ，
  桌面 
 
]; 
  var  Motors = [
   Bike，
   Car 
 
]; 
  var  Cloths = [
  衬衫，
  裤子，
  夹克 
 
]; 
  function  split（val）{
  return  val.split（/，\\ \\ s * /）; 
} 
  function  extractLast（term）{
  return  split（ （）.pop（）; 
} 
 $（ ＃tags）
  //  选择项目时，不要离开选项卡上的字段 
 .bind（< span class =code-string>  keydown， function （event）{ 
  if （event.keyCode === $ .ui.keyCode.TAB&& 
 $（ this ）。autocomplete（  instance）。menu.active）{ 
 event.preventDefault（）; 
} 
}）
 .autocomplete（{
 minLength： 0  ，
来源： function （请求，响应）{
  //  委托回自动填充，但提取最后一期 
回复（$ .ui。 autocomplete.filter（
 availableTags，extractLast（request.term）））; 
}，
焦点：功能（）{
  //  阻止在焦点上插入值 
  return   false < /跨度>; 
}，
 select： function （event，ui）{
  var  terms = split（ this  .value）; 
  //  删除当前输入 
 terms.pop（）; 
  //  添加所选项目 
 terms.push（ui.item。价值）; 
  //  添加占位符以获取末尾的逗号和空格 
 terms.push（ ）; 
  this  .value = terms.join（ 。）; 
  return   false ; 
} 
}）; 
}）; 
 <   /   script  >  
 <   / head  >  
 <   body  >  
 <   div     class   = < span class =code-keyword> ui-widget >  
 <   label     for   = 标签 > 标签编程语言：<   / label  >  
 <  输入   < span class =code-attribute> id   =  tags    size   =  50 >  
 <   / div  >  
 <   / body  >  

我的要求是当我在文本框中输入'@'时，availabletags元素应显示为'。'并显示相应的元素领域项目。例如，当我在文本框中输入@并从自动完成列表中选择电机时，。出现在自行车和汽车上。我正在努力实现它。有人可以帮帮我..



我尝试过的事情：



我的要求是当我在文本框中输入'@'时，availabletags元素应显示为'。'，并显示相应的元素字段项。例如，当我在文本框中输入@并从自动完成列表中选择电机时，。出现在自行车和汽车上。我正在努力实现它。有人可以帮帮我..

解决方案

（ function （）{
var availableTags = [
Electronics ，
Motors，
Cloths

];
var 电子设备= [
笔记本电脑，
移动设备，
桌面

];
var Motors = [
Bike，
Car

];
var Cloths = [
衬衫，
裤子，
夹克

];
function split（val）{
return val.split（/，\\ \\ s * /）;
}
function extractLast（term）{
return split（ （）.pop（）;
}

（ ＃tags）
// 选择项目时，不要离开选项卡上的字段
.bind（ keydown， function （event）{
if （event.keyCode ===

.ui.keyCode.TAB& ;&安培;

Hi I am trying to develop a autocomplete textbox with multiple values separated by full stop and the element below is my code.

<script>
    $(function() {
        var availableTags = [
            "Electronics",
            "Motors",
            "Cloths"

        ];
        var Electronics = [
            "Laptops",
            "Mobiles",
            "Desktop"

        ];
        var Motors = [
            "Bike",
            "Car"

        ];
        var Cloths = [
            "Shirt",
            "Pants",
            "Jackets"

        ];
        function split( val ) {
            return val.split( /,\s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }
        $( "#tags" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).autocomplete( "instance" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                minLength: 0,
                source: function( request, response ) {
                    // delegate back to autocomplete, but extract the last term
                    response( $.ui.autocomplete.filter(
                        availableTags, extractLast( request.term ) ) );
                },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push( ui.item.value );
                    // add placeholder to get the comma-and-space at the end
                    terms.push( "" );
                    this.value = terms.join( ". " );
                    return false;
                }
            });
    });
    </script>
</head>
<body>
<div class="ui-widget">
    <label for="tags">Tag programming languages: </label>
    <input id="tags" size="50">
</div>
</body>

My requirement is when I enter '@' in the textbox the availabletags element should display with a '.' and it show the respective element field item. for example when I enter '@'in the textbox and I choose the 'motors' from the autocomplete list and '.' appears with bike and car. I am trying to achieve it. can someone help me out..

What I have tried:

My requirement is when I enter '@' in the textbox the availabletags element should display with a '.' and it show the respective element field item. for example when I enter '@'in the textbox and I choose the 'motors' from the autocomplete list and '.' appears with bike and car. I am trying to achieve it. can someone help me out..

解决方案

(function() { var availableTags = [ "Electronics", "Motors", "Cloths" ]; var Electronics = [ "Laptops", "Mobiles", "Desktop" ]; var Motors = [ "Bike", "Car" ]; var Cloths = [ "Shirt", "Pants", "Jackets" ]; function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); }

( "#tags" ) // don't navigate away from the field on tab when selecting an item .bind( "keydown", function( event ) { if ( event.keyCode ===

.ui.keyCode.TAB &&

这篇关于自动填充文本框，其中多个值由句号和元素分隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！