Question

我正在尝试构建一个网络应用程序，我需要一个带有自动完成功能的文本字段，但我正在尝试它并不起作用。问题是我需要从js对象自动完成（用Json构建）。

我的对象如下：

    prod = {
"1":["1","alpargatas","asdf","1","10.5","2"],
"2":["2","volcom","adfw","2","40","5"],
"3":["3","botas","afafew","1","30","12"],
"4":["4","tenis","qrfqr ","1","40","9"]
};

我的剧本是这样的：

<input id="v1_busqueda_in"/>

$(function() {

$( "#v1_busqueda_in" ).autocomplete(
{
    source:data,
    select: function( event, ui ) {
        $( "#v1_busqueda_in" ).val( ui.item[0] + " / " + ui.item[1] );
        return false;
    }
}).data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a><strong>" + item[0] + "</strong> / " + item[1] + "</a>" )
        .appendTo( ul );
    };      

});

我使用像prod[2][0]这样的句子获取值，但我不知道如何使用第二个变量自动完成并将第一个变量作为选中（例如：写a，autocomp。alpargatas，js取1 ）

我需要一些帮助，谢谢;）

Answer 1

  <!doctype html>
  <html lang="en">
   <head>
  <meta charset="utf-8">
      <title>jQuery UI Autocomplete - Custom data and display</title>
    <link rel="stylesheet"   href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
   <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>

        $(function() {
       var projects = [
         {
           value: "jquery",
           label: "jQuery",
           desc: "the write less, do more, JavaScript library",
           icon: "jquery_32x32.png"
         },
         {
           value: "jquery-ui",
           label: "jQuery UI",
           desc: "the official user interface library for jQuery",
           icon: "jqueryui_32x32.png"
         },
         {
           value: "sizzlejs",
           label: "Sizzle JS",
           desc: "a pure-JavaScript CSS selector engine",
           icon: "sizzlejs_32x32.png"
           }
         ];

       $( "#project" ).autocomplete({
         minLength: 0,
         source: projects,
         focus: function( event, ui ) {
           $( "#project" ).val( ui.item.label );
           return false;
         },
         select: function( event, ui ) {
           $( "#project" ).val( ui.item.label );
           $( "#project-id" ).val( ui.item.value );
           $( "#project-description" ).html( ui.item.desc );
           $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

           return false;
         }
       })
       .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
         return $( "<li>" )
           .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
           .appendTo( ul );
       };
     });
  </script>

选择一个项目（开始时输入“j”）：

使用JQuery从对象自动完成

1 个答案: