自动完成与建议AJAX PHP PostgreSQL

时间:2015-07-19 21:15:56

标签: php jquery ajax autocomplete jquery-ui-autocomplete

我正在进行自动填充,但是当我在输入中写任何内容时,我会显示所有元素,我想要在输入中包含类型字符的项目。

我的代码是:

var searchRequest = null;
$("#buscar").autocomplete({
    maxLength: 5,
    source: function (request, response) {

        if (searchRequest !== null) {
            searchRequest.abort();
        }
        searchRequest = $.ajax({
            url: 'search.php',
            method: 'post',
            dataType: "json",
            success: function (data) {
                searchRequest = null;
                response($.map(data.items, function (item) {
                        return {
                            value: item.name1,
                            label: item.name1
                        };
                }));
            }
        }).fail(function () {
            searchRequest = null;
        });
    }
});

2 个答案:

答案 0 :(得分:0)

试试这个:

  source: function(request, response) {
        response($.map(data.items, function(item) {
            var term = request.term.toLowerCase(),
                name = item.name.toLowerCase();
            if (name.search(term) == 0 || item.code.indexOf(term.toUpperCase()) == 0) {
                return {
                    label: item.name,
                    value: item.name
                };
            }
        }).slice(0, 15)
       );
  },

答案 1 :(得分:0)

试试这段代码*

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="js/jquery-2.1.1.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery-ui.min.js"></script>
  <script>
        $(document).ready(function () {   
        $("#txtSearch").autocomplete({
           source: function(request,response) {
            $.ajax({
                url: "results.php",
                type: "POST",
                dataType: "json",                  
                data: { term: request.term },
                success: function (data) {                       
                    response($.map(data, function (item) {                        
                  return {  value:item.name, district:item.district , id: item.id
                            }; 
                     }))
                   }
            })
        },focus: function (event, ui) {                        
                                 $("#txthid").val(ui.item.id);
                               $("#txtid").val(ui.item.district);
                                elements.autocompleteSearch.val(ui.item.name);
                                return false;
                          },
    messages: {noResults: "", results: ""}            
    });
})
 </script>
     </head>
     <body>
    <form id="form1" runat="server" >
        <div class="demo">
            <div class="ui-widget">
               <label for="txtSearch">Enter UserName: </label>
                <input type="search" id="txtSearch" />
                <label for="txtid">ID is: </label>
                <input type="id" id="txtid" />           
                 </div>
    </form>
    <form action="file2.html" method="LINK">
   <input type="hidden" id="txthid" name="id">
      <input type="submit" value="Home page" >
     </form>
   </body>
  </html>