10

次のコードでjqueryuiオートコンプリートプラグインを使用しているim

$(this).autocomplete({
                source: function(request, response) {
                    $.ajax({ url: 'clinic/auto',
                    data: { 'term': this.term,'name': this.element.attr('complete')},
                    dataType: "json",
                    type: "POST",
                    success: function(data){
                        response(data);
                    }
                });
            },
            minLength: 2
        });

これにより、すべての結果のリストがドロップダウンに表示されます。

私の質問は、uのオートコンプリート作業を取得し、追加された部分を強調表示して使いやすくする方法です。

コーディングする必要がありますか？または、そのための既存のオプションがありますか？手動で行う場合、どのように行うことができますか？写真の例： ここに画像の説明を入力してください

これまでの解決策：

私はこのリンク とこれがスタイリングを編集するのに非常に便利であることがわかりました（monkey-patching jquery-autocomplete）、それでも私が望むものではありません。

4

4 に答える 4

19

残念ながら、そのための既存のオプションはありません。幸い、JQueryオートコンプリートで提供されるイベントを使用してそれを行う非常に簡単な方法があります。このJSFiddleをチェックしてください：http：//jsfiddle.net/RyTuV/133/

お気づきのように、追加する関連コードはJQueryAutocompleteOpenイベントを使用します。

提案メニューが開かれたとき、または更新されたときにトリガーされます。

このイベントを使用すると、リストの最初の項目のテキストを入力フィールドにすでに入力されているものに追加し、入力テキストの後から追加されたテキストの最後まで強調表示できます。 

$(this).autocomplete({
    source: function(request, response) {
                $.ajax({ url: 'clinic/auto',
                data: { 'term': this.term,'name': this.element.attr('complete')},
                dataType: "json",
                type: "POST",
                success: function(data){
                    response(data);
                }
            });
    },
    minLength: 2,
    open: function( event, ui ) {
        var firstElement = $(this).data("autocomplete").menu.element[0].children[0]
           , inpt = $('#autocomplete')
           , original = inpt.val()
           , firstElementText = $(firstElement).text();

        /*
           here we want to make sure that we're not matching something that doesn't start
           with what was typed in 
        */
        if(firstElementText.toLowerCase().indexOf(original.toLowerCase()) === 0){
            inpt.val(firstElementText);//change the input to the first match

            inpt[0].selectionStart = original.length; //highlight from end of input
            inpt[0].selectionEnd = firstElementText.length;//highlight to the end
        }
    }
});

これをテンプレートとして使用すると、メニュー内の項目をループして、入力テキストで始まる最初の一致を見つけ、最初の項目だけを使用するのではなく、それを使用して入力および強調表示できます。

于 2013-06-18T04:22:51.430 に答える
2

自分でコーディングするか、これを行う別のオートコンプリートプラグインがあるかどうかを確認する必要があります。

自分でコーディングするには、responseイベントを参照して最初に一致する結果テキストを取得し、それを入力ボックスに配置する必要があります。選択したテキストを操作するには、次の投稿を参照してください：jQueryを使用した入力ボックス内の文字列の一部の選択

于 2012-12-28T00:05:01.320 に答える
0

上記の答えが見つかりましたが、jqueryUIからのドロップダウンがあるので、自分でスクリプトを作成し始めました。そして、ここに投稿することにしました。動作中のjsfiddle：https ://jsfiddle.net/wb3kpxaj/

コード：

/* Need jquery to be extended with code snippet for selectrange i found somewhere, but forgot where...: */
$.fn.selectRange = function(start, end) {
  var e = document.getElementById($(this).attr('id')); // I don't know why... but $(this) don't want to work today :-/
  if (!e) return;
  else if (e.setSelectionRange) { e.focus(); e.setSelectionRange(start, end); } /* WebKit */ 
  else if (e.createTextRange) { var range = e.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', start); range.select(); } /* IE */
  else if (e.selectionStart) { e.selectionStart = start; e.selectionEnd = end; }
  return $(e); };

autofill=['Banana', 'Banonas', 'Appel', 'Appelpie', 'Other', 'OtherMoreSpecific', 'OtherMoreDifferent'];

$('#autofill').on('keyup', function(e) {
   unvalidInputKeys=[8,9,13,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,91,92,93,112,113,114,115,116,117,118,119,120,121,122,123,144,145];
  if($(this).val().length>0&&!unvalidInputKeys.includes(e.keyCode)) {
    for(i=0;i<autofill.length;i++) {
      if(autofill[i].startsWith($(this).val())) {
        userTypedLength=$(this).val().length;
        $(this).val(autofill[i]);
        $(this).selectRange(userTypedLength, autofill[i].length);
        return;
        }
      }
    }
  });
于 2017-07-03T15:04:02.040 に答える
0

よく働く！モバイルデバイスの場合：それほど多くはありません。メニューの最初の項目は、最初に表示された後に自動的に選択されます。

これを回避するために、私はモバイルデバイス用のこのソリューションを思いつきました：

    close: function( event, ui ) {
        let firstElement =  $(this).data("uiAutocomplete").menu.element[0].children[0]
           , inpt = $(this)
           , original = inpt.val()
           , firstElementText = $(firstElement).text();

        /*
           here we want to make sure that we're not matching something that doesn't start
           with what was typed in 
        */
        if(firstElementText.toLowerCase().indexOf(original.toLowerCase()) === 0){
            inpt.val(firstElementText);//change the input to the first match

            inpt[0].selectionStart = original.length; //highlight from end of input
            inpt[0].selectionEnd = firstElementText.length; //highlight to the end
            $("#zoominmap").click(); // trigger click on mobile
        }
    },

close代わりに-そしてハイライト後のopenボタン（）のクリックイベント。#zoominmap

私はこのメディアクエリでコード全体をラップしています：

if (window.matchMedia('only screen
 and (min-device-width:120px)
 and (max-device-width:767px)').matches) {
/*
mobile
*/
} else {
/*
desktop
*/
}
于 2018-11-20T19:24:54.480 に答える