Tự động hoàn thành giao diện người dùng jQuery với mục và id

Question

Tôi có tập lệnh sau hoạt động với mảng 1 chiều. Có thể để có được điều này để làm việc với một mảng 2 chiều? Sau đó, bất kỳ mục nào được chọn, bằng cách nhấp vào nút thứ hai trên trang, sẽ hiển thị id của bất kỳ mục nào được chọn.

Đây là kịch bản với mảng 1 chiều:

var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]; 
$("#txtAllowSearch").autocomplete({ 
    source: $local_source 
}); 

Đây là kịch bản cho nút để kiểm tra id, đó là không đầy đủ:

$('#button').click(function() { 
    // alert($("#txtAllowSearch").someone_get_id_of_selected_item); 
}); 

Answer 1

Bạn cần phải sử dụng giao diện người dùng .item.label (văn bản) và thuộc tính ui.item.value (id)

$('#selector').autocomplete({ 
    source: url, 
    select: function (event, ui) { 
     $("#txtAllowSearch").val(ui.item.label); // display the selected text 
     $("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input 
    } 
}); 

$('#button').click(function() { 
    alert($("#txtAllowSearchID").val()); // get the id from the hidden input 
}); 

[Chỉnh sửa] Bạn cũng hỏi cách tạo ra các mảng đa chiều ...

Bạn sẽ có thể tạo ra các mảng như vậy:

var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"], 
        [4,"javascript"], [5,"asp"], [6,"ruby"]]; 

Đọc thêm về cách làm việc với mảng đa chiều ở đây: http://www.javascriptkit.com/javatutors/literal-notation2.shtml

Answer 2

Từ Tab Tổng quan về plugin tự động hoàn thành jQuery:

Dữ liệu cục bộ có thể là một mảng đơn giản của chuỗi hoặc chứa đối tượng mỗi mục trong mảng, với thuộc tính nhãn hoặc giá trị hoặc cả hai. Thuộc tính nhãn được hiển thị trong menu đề xuất . Giá trị sẽ là được chèn vào phần tử đầu vào sau người dùng đã chọn thứ gì đó từ menu . Nếu chỉ một thuộc tính là được chỉ định, nó sẽ được sử dụng cho cả hai, ví dụ: nếu bạn chỉ cung cấp giá trị thuộc tính, giá trị cũng sẽ là được sử dụng làm nhãn.

Vì vậy, mảng "hai chiều" của bạn có thể trông giống như:

var $local_source = [{ 
    value: 1, 
    label: "c++" 
}, { 
    value: 2, 
    label: "java" 
}, { 
    value: 3, 
    label: "php" 
}, { 
    value: 4, 
    label: "coldfusion" 
}, { 
    value: 5, 
    label: "javascript" 
}, { 
    value: 6, 
    label: "asp" 
}, { 
    value: 7, 
    label: "ruby" 
}]; 

Bạn có thể truy cập vào nhãn và giá trị thuộc tính bên trong focus và select sự kiện thông qua các ui luận sử dụng ui.item.label và ui.item.value.

Sửa

Có vẻ như bạn phải "hủy bỏ" sự tập trung và chọn sự kiện để nó không đặt những con số id bên trong hộp văn bản. Trong khi làm như vậy bạn có thể sao chép giá trị trong một biến ẩn thay thế. Here is an example.

Answer 3

<script type="text/javascript"> 
$(function() { 
    $("#MyTextBox").autocomplete({ 
     source: "MyDataFactory.ashx", 
     minLength: 2, 
     select: function (event, ui) { 
      $('#MyIdTextBox').val(ui.item.id); 
      return ui.item.label; 
     } 
    }); 
}); 

Các câu trả lời ở trên đã giúp nhưng, đã không làm việc trong việc thực hiện của tôi. Thay vì sử dụng cài đặt giá trị bằng cách sử dụng jQuery, tôi sẽ trả về giá trị từ hàm đến tùy chọn chọn.

MyDataFactory.trang ashx có một lớp với ba thuộc tính Id, Label, Value.

Chuyển Danh sách vào bộ nối tiếp JavaScript và trả về phản hồi.

Answer 4

Mã của tôi chỉ hoạt động khi tôi thêm 'return false' vào hàm chọn. Không có điều này, đầu vào được thiết lập với giá trị bên phải bên trong hàm select và sau đó nó được đặt thành giá trị id sau khi chức năng chọn đã kết thúc. Trả về false đã giải quyết được vấn đề này.

$('#sistema_select').autocomplete({ 

    minLength: 3, 
    source: <?php echo $lista_sistemas;?> , 
    select: function (event, ui) { 
     $('#sistema_select').val(ui.item.label); // display the selected text 
     $('#sistema_select_id').val(ui.item.value); // save selected id to hidden input 
     return false; 
    }, 
    change: function(event, ui) { 
     $("#sistema_select_id").val(ui.item? ui.item.value : 0); 
    } 
}); 

Bên cạnh đó, tôi đã thêm một chức năng để sự kiện thay đổi bởi vì, nếu người dùng viết một cái gì đó trong đầu vào hoặc xóa một phần của nhãn hàng sau khi một mục được lựa chọn, tôi cần phải cập nhật các trường ẩn để tôi không hiểu sai (đã lỗi thời) id. Ví dụ: nếu nguồn của tôi là:

var $local_source = [ 
     {value: 1, label: "c++"}, 
     {value: 2, label: "java"}] 

và loại người dùng ja và chọn tùy chọn 'java' với tự động hoàn thành, tôi lưu giá trị 2 vào trường ẩn. Nếu người dùng xóa một thư từ 'java', por exemple kết thúc bằng 'jva' trong trường nhập, tôi không thể chuyển mã của tôi vào id 2, bởi vì người dùng đã thay đổi giá trị. Trong trường hợp này, tôi đặt id là 0.

Answer 5

Chỉ muốn chia sẻ những gì đã hoạt động cho mục đích của tôi, trong trường hợp nó cũng có thể giúp người khác. Ngoài ra dựa trên câu trả lời Paty Lustosa của trên, vui lòng cho phép tôi thêm một phương pháp có nguồn gốc từ trang web này, nơi ông sử dụng một cách tiếp cận ajax cho phương pháp nguồn

http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3

kicker là kết quả "chuỗi" hoặc định dạng json từ script php của bạn (listing.php dưới đây) có nguồn gốc tập hợp kết quả được hiển thị trong trường autocomplete nên làm theo một cái gì đó như thế này:

{"list":[ 
    {"value": 1, "label": "abc"}, 
    {"value": 2, "label": "def"}, 
    {"value": 3, "label": "ghi"} 
    ]} 

sau đó trên phần nguồn của phương pháp autocomplete:

source: function(request, response) { 
     $.getJSON("listing.php", { 
      term: request.term 
     }, function(data) {      
      var array = data.error ? [] : $.map(data.list, function(m) { 
       return { 
        label: m.label, 
        value: m.value 
       }; 
      }); 
      response(array); 
     }); 
    }, 
    select: function (event, ui) { 
     $("#autocomplete_field").val(ui.item.label); // display the selected text 
     $("#field_id").val(ui.item.value); // save selected id to hidden input 
     return false; 
    } 

Hy vọng điều này sẽ giúp ... tất cả tốt nhất!

Answer 6

Tôi không nghĩ rằng cần phải hack xung quanh giá trị và thuộc tính nhãn, sử dụng trường nhập ẩn hoặc để chặn sự kiện. Bạn có thể thêm thuộc tính tùy chỉnh của riêng bạn vào từng đối tượng Tự động điền và sau đó đọc giá trị thuộc tính đó sau.

Đây là một ví dụ.

$(#yourInputTextBox).autocomplete({ 
    source: function(request, response) { 
     // Do something with request.term (what was keyed in by the user). 
     // It could be an AJAX call or some search from local data. 
     // To keep this part short, I will do some search from local data. 
     // Let's assume we get some results immediately, where 
     // results is an array containing objects with some id and name. 
     var results = yourSearchClass.search(request.term); 

     // Populate the array that will be passed to the response callback. 
     var autocompleteObjects = []; 
     for (var i = 0; i < results.length; i++) { 
      var object = { 
       // Used by jQuery Autocomplete to show 
       // autocomplete suggestions as well as 
       // the text in yourInputTextBox upon selection. 
       // Assign them to a value that you want the user to see. 
       value: results[i].name; 
       label: results[i].name; 

       // Put our own custom id here. 
       // If you want to, you can even put the result object. 
       id: results[i].id; 
      }; 

      autocompleteObjects.push(object); 
     } 

     // Invoke the response callback. 
     response(autocompleteObjects); 
    }, 
    select: function(event, ui) { 
     // Retrieve your id here and do something with it. 
     console.log(ui.item.id); 
    } 
}); 

documentation đề cập đến bạn phải chuyển vào một mảng đối tượng có thuộc tính nhãn và giá trị. Tuy nhiên, bạn chắc chắn có thể vượt qua đối tượng với nhiều hơn so với hai thuộc tính này và đọc chúng sau này.

Đây là phần liên quan mà tôi đang đề cập đến.

Mảng: Một mảng có thể được sử dụng cho dữ liệu cục bộ. Có hai định dạng được hỗ trợ : Một chuỗi các chuỗi: ["Choice1", "Choice2"] Một mảng gồm các đối tượng có nhãn và giá trị: [{label: "Choice1", giá trị: "value1"}, .. .] Thuộc tính nhãn được hiển thị trong trình đơn đề xuất . Giá trị sẽ được chèn vào phần tử đầu vào khi người dùng chọn một mục. Nếu chỉ một thuộc tính được chỉ định, nó sẽ được sử dụng cho cả hai, ví dụ:, nếu bạn chỉ cung cấp các thuộc tính giá trị, giá trị sẽ cũng được sử dụng làm nhãn.

Answer 7

Điều này có thể được thực hiện mà không cần sử dụng trường ẩn. Bạn phải tận dụng khả năng của JQuery để tạo các thuộc tính tùy chỉnh trong thời gian chạy.

('#selector').autocomplete({ 
    source: url, 
    select: function (event, ui) { 
     $("#txtAllowSearch").val(ui.item.label); // display the selected text 
     $("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input 
    } 
}); 

$('#button').click(function() { 
    alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input 
}); 

Answer 8

Cuối cùng tôi đã làm nó Cảm ơn rất nhiều bạn bè, và một cảm ơn đặc biệt tới ông https://stackoverflow.com/users/87015/salman-a vì mã của ông tôi đã có thể để giải quyết nó đúng cách. cuối cùng mã của tôi đang tìm kiếm như thế này là tôi đang sử dụng grails groovy tôi hy vọng điều này sẽ giúp ai đó có .. Thanks a lot

mã html trông như thế này trong trang GSP của tôi

<input id="populate-dropdown" name="nameofClient" type="text"> 
    <input id="wilhaveid" name="idofclient" type="text"> 

kịch bản Chức năng là như thế này trong trang GSP của tôi

<script> 
     $("#populate-dropdown").on('input', function() { 
      $.ajax({ 
       url:'autoCOmp', 
       data: {inputField: $("#populate-dropdown").val()}, 
       success: function(resp){ 
        $('#populate-dropdown').autocomplete({ 
         source:resp, 
         select: function (event, ui) { 
          $("#populate-dropdown").val(ui.item.label); 
          $("#wilhaveid").val(ui.item.value); 
          return false; 
         } 
        }) 
       } 
      }); 
     }); 
    </script> 

Và mã điều khiển của tôi là như thế này

def autoCOmp(){ 
    println(params) 
    def c = Client.createCriteria() 
    def results = c.list { 
     like("nameOfClient", params.inputField+"%") 
    } 

    def itemList = [] 
    results.each{ 
     itemList << [value:it.id,label:it.nameOfClient] 
    } 
    println(itemList) 
    render itemList as JSON 
} 

Một điều nữa tôi chưa đặt id trường ẩn vì lúc đầu tôi kiểm tra xem tôi có nhận id chính xác hay không, bạn có thể giữ nó ẩn chỉ cần đặt type = hidden thay vì văn bản cho mục nhập thứ hai trong html

Cảm ơn!

Answer 9

Tôi đã thử trên mã hiển thị (giá trị hoặc ID) trong hộp văn bản được insted của văn bản Label. Sau đó tôi đã cố gắng event.preventDefault() nó làm việc một cách hoàn hảo ...

var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}] 

$(".jquery-autocomplete").autocomplete({ 
    source: e,select: function(event, ui) { 
     event.preventDefault(); 
     $('.jquery-autocomplete').val(ui.item.label); 
     console.log(ui.item.label); 
     console.log(ui.item.value); 
    } 
}); 

Answer 10

Giả sử các đối tượng trong mảng nguồn của bạn có một tài sản id ...

var $local_source = [ 
    { id: 1, value: "c++" }, 
    { id: 2, value: "java" }, 
    { id: 3, value: "php" }, 
    { id: 4, value: "coldfusion" }, 
    { id: 5, value: "javascript" }, 
    { id: 6, value: "asp" }, 
    { id: 7, value: "ruby" }]; 

Bắt giữ của dòng điện Ví dụ và kiểm tra thuộc tính selectedItem của nó sẽ cho phép bạn truy xuất các thuộc tính của mục hiện đang được chọn. Trong trường hợp này, cảnh báo id của mục đã chọn.

$('#button').click(function() { 
    alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id; 
});