変更フィールド

Question

は、私は私が表示することができますプラグインを見つけました私が望むようにリストを作成しますが、私は自分のリストでデフォルトのルックアップリストを置き換える必要があり、それを行う方法はわかりません（私はそれを挿入するコードはわかりません）。 javacriptとjQueryを使用して、優先的に

、。 これは私がすなわち上の要素を検査するとき私のスクリプトは、このコードを生成する自動補完ドロップダウンリスト

\t 
 

 
\t $(function() { 
 

 
\t  $.widget("custom.combobox", { 
 

 
\t  _create: function() { 
 

 
\t   this.wrapper = $("<span>") 
 

 
\t   .addClass("custom-combobox") 
 

 
\t   .insertAfter(this.element); 
 

 
\t 
 

 
\t   this.element.hide(); 
 

 
\t   this._createAutocomplete(); 
 

 
\t   this._createShowAllButton(); 
 

 
\t  }, 
 

 
\t 
 

 
\t  _createAutocomplete: function() { 
 

 
\t   var selected = this.element.children(":selected"), 
 

 
\t   value = selected.val() ? selected.text() : ""; 
 

 
\t 
 

 
\t   this.input = $("<input>") 
 

 
\t   .appendTo(this.wrapper) 
 

 
\t   .val(value) 
 

 
\t   .attr("title", "") 
 

 
\t   .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") 
 

 
\t   .autocomplete({ 
 

 
\t    delay: 0, 
 

 
\t    minLength: 0, 
 

 
\t    source: $.proxy(this, "_source") 
 

 
\t   }) 
 

 
\t   .tooltip({ 
 

 
\t    classes: { 
 

 
\t    "ui-tooltip": "ui-state-highlight" 
 

 
\t    } 
 

 
\t   }); 
 

 
\t 
 

 
\t   this._on(this.input, { 
 

 
\t   autocompleteselect: function(event, ui) { 
 

 
\t    ui.item.option.selected = true; 
 

 
\t    this._trigger("select", event, { 
 

 
\t    item: ui.item.option 
 

 
\t    }); 
 

 
\t   }, 
 

 
\t 
 

 
\t   autocompletechange: "_removeIfInvalid" 
 

 
\t   }); 
 

 
\t  }, 
 

 
\t 
 

 
\t  _createShowAllButton: function() { 
 

 
\t   var input = this.input, 
 

 
\t   wasOpen = false; 
 

 
\t 
 

 
\t   $("<a>") 
 

 
\t   .attr("tabIndex", -1) 
 

 
\t   .attr("title", "Show All Items") 
 

 
\t   .tooltip() 
 

 
\t   .appendTo(this.wrapper) 
 

 
\t   .button({ 
 

 
\t    icons: { 
 

 
\t    primary: "ui-icon-triangle-1-s" 
 

 
\t    }, 
 

 
\t    text: false 
 

 
\t   }) 
 

 
\t   .removeClass("ui-corner-all") 
 

 
\t   .addClass("custom-combobox-toggle ui-corner-right") 
 

 
\t   .on("mousedown", function() { 
 

 
\t    wasOpen = input.autocomplete("widget").is(":visible"); 
 

 
\t   }) 
 

 
\t   .on("click", function() { 
 

 
\t    input.trigger("focus"); 
 

 
\t 
 

 
\t    // Close if already visible 
 

 
\t    if (wasOpen) { 
 

 
\t    return; 
 

 
\t    } 
 

 
\t 
 

 
\t    // Pass empty string as value to search for, displaying all results 
 

 
\t    input.autocomplete("search", ""); 
 

 
\t   }); 
 

 
\t  }, 
 

 
\t 
 

 
\t  _source: function(request, response) { 
 

 
\t   var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
 

 
\t   response(this.element.children("option").map(function() { 
 

 
\t   var text = $(this).text(); 
 

 
\t   if (this.value && (!request.term || matcher.test(text))) 
 

 
\t    return { 
 

 
\t    label: text, 
 

 
\t    value: text, 
 

 
\t    option: this 
 

 
\t    }; 
 

 
\t   })); 
 

 
\t  }, 
 

 
\t 
 

 
\t  _removeIfInvalid: function(event, ui) { 
 

 
\t 
 

 
\t   // Selected an item, nothing to do 
 

 
\t   if (ui.item) { 
 

 
\t   return; 
 

 
\t   } 
 

 
\t 
 

 
\t   // Search for a match (case-insensitive) 
 

 
\t   var value = this.input.val(), 
 

 
\t   valueLowerCase = value.toLowerCase(), 
 

 
\t   valid = false; 
 

 
\t   this.element.children("option").each(function() { 
 

 
\t   if ($(this).text().toLowerCase() === valueLowerCase) { 
 

 
\t    this.selected = valid = true; 
 

 
\t    return false; 
 

 
\t   } 
 

 
\t   }); 
 

 
\t 
 

 
\t   // Found a match, nothing to do 
 

 
\t   if (valid) { 
 

 
\t   return; 
 

 
\t   } 
 

 
\t 
 

 
\t   // Remove invalid value 
 

 
\t   this.input 
 

 
\t   .val("") 
 

 
\t   .attr("title", value + " didn't match any item") 
 

 
\t   .tooltip("open"); 
 

 
\t   this.element.val(""); 
 

 
\t   this._delay(function() { 
 

 
\t   this.input.tooltip("close").attr("title", ""); 
 

 
\t   }, 2500); 
 

 
\t   this.input.autocomplete("instance").term = ""; 
 

 
\t  }, 
 

 
\t 
 

 
\t  _destroy: function() { 
 

 
\t   this.wrapper.remove(); 
 

 
\t   this.element.show(); 
 

 
\t  } 
 

 
\t  }); 
 

 
\t 
 

 
\t  $("#combobox").combobox(); 
 

 
\t  $("#toggle").on("click", function() { 
 

 
\t  $("#combobox").toggle(); 
 

 
\t  }); 
 

 
\t });

\t .custom-combobox { 
 

 
\t  position: relative; 
 

 
\t  display: inline-block; 
 

 
\t } 
 

 
\t .custom-combobox-toggle { 
 

 
\t  position: absolute; 
 

 
\t  top: 0; 
 

 
\t  bottom: 0; 
 

 
\t  margin-left: -1px; 
 

 
\t  padding: 0; 
 

 
\t } 
 

 
\t .custom-combobox-input { 
 

 
\t  margin: 0; 
 

 
\t  padding: 5px 10px; 
 

 
\t }

\t 
 

 
\t <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 

 
\t <link rel="stylesheet" href="/resources/demos/style.css"> 
 

 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 

 
\t <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
\t 
 

 
\t <div class="ui-widget"> 
 

 
\t <select id="combobox"> 
 

 
\t  <option value="Accessory">Accessory</option> 
 

 
\t  <option value="Car">Car</option> 
 

 
\t  <option value="Option">Option</option> 
 

 
\t </select> 
 

 
\t </div>

を持っているために使用するjavascriptのあるあなたに

ありがとうございました* 1

<div class="ui-widget"> 
 

 
\t <select id="combobox" style="display: none;"> 
 

 
\t  <option value="Accessory">Accessory</option> 
 

 
\t  <option value="Car">Car</option> 
 

 
\t  <option value="Option">Option</option> 
 

 
\t </select> 
 
    <span class="custom-combobox"> 
 
     <input title="" class="custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left ui-autocomplete-input" autocomplete="off"> 
 
     <a tabindex="-1" title="Show All Items" class="ui-button ui-widget ui-button-icon-only custom-combobox-toggle ui-corner-right" role="button"> 
 
     <span class="ui-button-icon ui-icon ui-icon-triangle-1-s"></span> 
 
     <span class="ui-button-icon-space"> </span> 
 
     </a> 
 
    </span> 
 

 
\t </div>

これは、SharePoint * 2

<td width="350" class="ms-formbody" valign="top"> 
 
\t \t <!-- FieldName="Products" 
 
\t \t \t FieldInternalName="Products" 
 
\t \t \t FieldType="SPFieldLookup" 
 
\t \t --> 
 
\t \t \t <span dir="none"> 
 
     <select title="Products" id="Products_139d7cd0-706c-47fd-82fd-d532bae457c3_$LookupField"> 
 
      <option selected="selected" value="0">(None)</option> 
 
      <option value="2">Accessories</option> 
 
      <option value="1">Cars</option> 
 
      <option value="3">Options</option> 
 
     </select> 
 
     <br> 
 
     </span> 
 
</td>

のlokkup情報のデフォルト表示のコードがあると私はデコードを交換する必要があります* 2 by the code * 1

例（私は塗料の上にそれをやった）：

From this

To this

Answer 1

これは、カスタムフォームですか？その場合は、ドロップダウンからIDを使用して、カスタムプラグインのドロップダウンに移入する必要があります。 あなたのASPXファイルを編集する必要があります。

私は今までにしました。 ここにコードがあります.de divクラスのUIウィジェットは、いくつかのCSSをドロップダウンするためのコンテナです。このIDは、selectタグの一部である

ctl00_ctl44_g_*ID*_ff71_ctl00_Lookup 

：あなたのDOMで は次のように、元のドロップダウン からIDが見えるです。 selectタグにはオプションがあります。あなたはそれらのオプションを取得する必要がありますIDとプラグインに配置します。

ので、プラグインが受け入れるデータの種類を把握。アレイ？選択/オプション？

を入力し、IDから必要なデータにデータを変換します。

<tr> 
    <td width="190px" valign="top" class="ms-formlabel"> 
     <input id="nieuweKlant" type="button" value="Nieuwe Klant" onclick="openDialogEdit();" /> 
     <H3 class="ms-standardheader"> 
      <nobr>Klant</nobr> 
     </H3> 
    </td> 
    <td width="400px" valign="top" class="ms-formbody"> 
     <input id="verversKlanten" type="button" value="Ververs Klanten" onclick="getListItem();" /> 
     <div class="ui-widget"> 
     <SharePoint:FormField runat="server" id="ff7{$Pos}" ControlMode="Edit" FieldName="Klant" __designer:bind="{ddwrt:DataBind('i',concat('ff7',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Klant')}"/> 
     </div> 
     <SharePoint:FieldDescription runat="server" id="ff7description{$Pos}" FieldName="Klant" ControlMode="Edit"/> 
     <input id="klantgegevens" type="button" value="Klantgegevens" onclick="openDialogEdit();" /> 
    </td> 
</tr>