Как я могу дать предложение для текстового поля на основе поиска из источника данных JSON - PullRequest
Новая
       20

Как я могу дать предложение для текстового поля на основе поиска из источника данных JSON

0 голосов
/ 29 мая 2019

У меня есть источник данных, похожий на этот. 

0: {id: 12, productNumber: "FGC 101 89/1A380", rstate: "R1B", functionDesignation: "J-VPN 1.0 WIND",…}
acronym: "vpn"
code: null
functionDesignation: "J-VPN 1.0 WIND"
id: 12
prCode: null
productNumber: "FGC 101 89/1A380"
reCode: "DS4"
rstate: "R1B"
versionDesignationText: ""
1: {id: 13, productNumber: "FGC 101 89/1A380", rstate: "R1A", functionDesignation: "J-VPN 1.0 WIND",…}
acronym: "vpn"
code: null
functionDesignation: "J-VPN 1.0 WIND"
id: 13
prCode: null
productNumber: "FGC 101 89/1A380"
reCode: "DS4"
rstate: "R1A"
versionDesignationText: ""

У меня также есть текстовое поле, как показано ниже. 

<div class="col-md-3 col-sm-3 col-xs-3">
              <label class="control-label">Product Name</label>
                <input type="text" class="form-control" id="emsProductName" />
              </div>

Теперь, когда пользователь вводит акроним (vpn) или обозначение функции (J-VPN 1.0 WIND), как я могу показать предложение первых четырех столбцов, которое соответствует.

Я сделал это следующим образом 

 $("#emsProductName").autocomplete({
		    source: function (request, response) {
		    	console.log(request.term);
		        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
		        $.ajax({
		        	type : 'POST',	                                     
                    url : config.vnfURL + 'vnf/getPRIM',
		            dataType: "json",
		            contentType: "application/json; charset=utf-8",
		             data: {
		              q: request.term
		              },
		            success: function (data) {
		            	console.log(response);
		                response($.map(data, function(v,i){
		                    var text = v.acronym;
		                    if ( text && ( !request.term || matcher.test(text) ) ) {
		                        return {
		                                label: v.acronym+"_"+v.productNumber+"_"+v.functionDesignation+"_"+v.rstate+ "_" +v.versionDesignationText,
		                                value: v.productNumber+"_"+v.functionDesignation+"_"+v.rstate+ "_" +v.versionDesignationText
		                                
		                               };
		                               
		                    }
		                }));
		            }
		        });
		    }
		});

Работает отлично, но полное значение сохраняется в текстовом поле emsProductName.

Как можно разделить значение и поместить только functionDesignation в emsProductName (текстовое поле), rstate в Rstate (текстовое поле), prodcutNumber в текстовых полях prodcutNumber соответственно.

1 Ответ

0 голосов
/ 29 мая 2019

Ниже приведен пример кода автозаполнения, но вам необходимо преобразовать его в соответствии с вашими потребностями. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Custom data and display</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
  }
  #project-icon {
    float: left;
    height: 32px;
    width: 32px;
  }
  #project-description {
    margin: 0;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var projects = [
      {
        functiondesignation: "ericson software",
        accrname: "SDI",
        rstate: "R10A",
        productnumber: "FGC 101 2997"
      },
       {
       functiondesignation: "ericson software",
        accrname: "SDI",
        rstate: "R9A",
        productnumber: "FGC 101 2997"
      },
       {
       functiondesignation: "ericson software",
        accrname: "SDI",
        rstate: "R9A",
        productnumber: "FGC 101 2997"
      },
       {
        accrname: "SDN",
        functiondesignation: "ericson software",
        rstate: "R3A",
        productnumber: "FGC 101 3031/6"
      }
    ];
 
    $( "#project" ).autocomplete({
      minLength: 1,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.accrname );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.functiondesignation );
        $( "#project-description" ).html( ui.item.accrname +ui.item.rstate + ui.item.productnumber );
        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<div>" + item.accrname +  item.rstate + item.productnumber+ "</div>")
        .appendTo( ul );
    };
  } );
  </script>
</head>
<body>
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>
 
 
</body>
</html>
...