JQuery Autocomplete

前端 未结 2 1344
攒了一身酷
攒了一身酷 2021-01-21 12:12

I\'ve got a problem with my jQuery autocomplete field. Its some kind of strange.

This is my autocomplete field and script. The response from my mvc function works fine.

相关标签:
2条回答
  • 2021-01-21 12:29

    One thing that seems wrong with the code you have shown is the fact that you have included the jquery-ui script twice (the minified and standard versions). You should have only one:

    <script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>
    
    0 讨论(0)
  • 2021-01-21 12:34

    $(function () {
      var getData = function (request, response) {
        $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          url: "Default.aspx/GetMultiProductList",
          data: "{'term':'" + $("#txtAutoCompleteMulti").val() + "'}",
          dataType: "json",
          success: function (data) {
            response($.map(data.d, function (item) {
              if (item != null)
                return { label: item.label, title: item.value }//value: item.label,
                }))
          },
          error: function (result) {
            alert("Error");
          }
        });
      };
      var selectItem = function (event, ui) { $("#txtAutoCompleteMulti").val(ui.item.value); return false; }
      $("#txtAutoCompleteMulti").autocomplete({
        source: getData,
        select: selectItem,
        _resizeMenu: function () {
          this.menu.element.outerWidth(500);
        },
        search: function (event, ui) { },
        minLength: 1,
        change: function (event, ui) {
          if (!ui.item) {
            $('#txtAutoCompleteMulti').val("")
          }
        },
        select: function (event, ui) {
          $("#txtAutoCompleteMulti").prop('title', ui.item.title)
        },
        autoFocus: true,
        delay: 500
      });
    });
     .ui-autocomplete {
                max-height: 300px;
                overflow-y: auto;
                overflow-x: hidden;
            }
            .ui-autocomplete-loading {
                background: url('img/Progress_indicator.gif') no-repeat right center;
            }
            .seachbox {
                border: 1px solid #ccc;
                border-radius: 4px;
                width: 250px;
                padding: 6px 25px 6px 6px;
                transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
            }
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    
    <div>
       <table style="width: 100%;">
         <tr>
           <td style="width: 20%">Product Name :</td>
           <td>
             <input type="text" id="txtAutoCompleteMulti" placeholder="Seach Product" class="seachbox" />
           </td>
         </tr>
      </table>
    </div>

    c# code using webmethod

    0 讨论(0)
提交回复
热议问题